2009年11月23日 星期一

SyntaxHighlighter出2.1版了

之前我寫過一篇關於如何在網頁上利用SyntaxHighlighter這個library的文章,就可以顯示漂亮的程式語法了。可是那時候我沒有告訴大家,要如何在你的blog上做這些設定。其實還蠻簡單的,這邊就以Pixnet為例吧。


在這邊假設大家都會用Javascript以及基本的jQuery語法,所以我就不說太詳細啦。首先先增加一個可以放javascript的側邊欄位,然後把程式碼都複製進去。第3行的判斷式,主要是拿來判斷目前這一頁的原始碼是否含有pre標籤,而且class是brush開頭;或者是script標籤,而且type是syntaxhighlighter。用pre標籤是SyntaxHighlighter 2.0的語法,而用script標籤是2.1的語法,為了相容我就兩個都加上去啦。

如果判斷式符合的話,就執行下面的程式,因為我會放程式碼的文章不多,所以只要你看的這個網頁沒有符合這個條件的話,就不會讀取SyntaxHighlighter的js以及css檔了,這主要是為了節省網路頻寬,要不然每一篇文章都要讀取這些js以及css,會拖慢網頁的開啟速度。

第5跟第6行則是執行SyntaxHighlighter,第5行stripBrs=true主要是用在blog上,如果blog的HTML Editor會自動換行的話,這邊就要設定將stripBrs為true,將br標籤去除。剩下的程式都是動態產生標籤,因為Pixnet無法自己修改head標籤的資料,所以就只能用append的方式加上去囉。

再來就是第28行,將你產生的這個側邊欄位隱藏起來,這也是blog常用的技巧之一,然後就大功告成啦,其他設定就看看官網的使用說明囉!想想看,如果Pixnet不支援jQuery的話,上面這些語法我恐怕要寫的很複雜才能成功的執行吧 = =。

參考資料:
SyntaxHighlighter - 把你的程式碼擺在網頁上
SyntaxHighlighter:Usage - Alex Gorbatchev

1 則留言:

海芋 提到...

推一個,非常詳細的解說!!!