SyntaxHighlighter出2.1版了 - 部落格

網頁版：http://kewang.pixnet.net/blog/post/25468641



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

01 <script type="text/javascript">
02 jQuery(function(){
03 if(jQuery("pre[class^='brush'],
script[type='syntaxhighlighter']").length > 0){
04
jQuery.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js",
function(){
05 SyntaxHighlighter.config.stripBrs = true;
06 SyntaxHighlighter.all();
07 });
08
09
jQuery.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js");
10
jQuery.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js");
11
jQuery.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js");
12
13 jQuery(document.createElement("link")).attr({
14 type: "text/css",
15 href:
"http://alexgorbatchev.com/pub/sh/current/styles/shCore.css",
16 rel: "stylesheet",
17 media: "screen"
18 }).appendTo(jQuery("head").get(0));
19
20 jQuery(document.createElement("link")).attr({
21 type: "text/css",
22 href:
"http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css",
23 rel: "stylesheet",
24 media: "screen"
25 }).appendTo(jQuery("head").get(0));
26 }
27
28 jQuery("#box511201").hide();
29 });

在這邊假設大家都會用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

--
雜七雜八的kewang部落格 http://kewang.tw

--