[HowTo] 幫blog加入SyntaxHighlighter，貼code更簡單

有時候會寫一些跟程式或網頁相關的東西，之前都是醜醜的直接將程式碼貼上，幾乎沒什麼做排版的動作。前兩天看了一下人家的blog文章，看到人家分享整整齊齊的程式碼，當下決定馬上也幫我的blog裝好套件。

其實早在一兩年前Google剛推出Google Prettify的時候，就有稍微看過，但是因為那個時候沒有可以讓我放檔案的host，所以就沒有安裝Google Prettify。這次除了Google Prettify之外，還找了另外一套很多人用的SyntaxHighlighter。跟Google Prettify比起來，SyntaxHighlighter比較漂亮，而且SyntaxHighlighter的作者相當佛心來的，還提供了外連服務，給沒有host放script files的使用者可以直接連到作者的網站去。只是缺點就是link的URL裡面有版本號，所以缺點就是當有新版本的時候，就要更新一次blog上的設定，當然如果想要繼續用舊版應該也是可以啦。

講了很多廢話，開始講設定吧。

1. 從官網上下載檔案，解壓縮之後將scripts裡面的檔案傳到host，js檔不用全部都傳，只要傳你會用到的語言script就可以了。swf記得也要傳，這樣才會有一鍵複製程式碼的功能。styles裡面的png檔全部都要上傳，至於css就傳你會用到的那個template跟shCore.css就可以了，像我是只有傳Defaulte的css。src裡面的shCore.js跟shLegacy.js也一起上傳。
2. 進到blogspot後台，選擇"Layout”->"Edit HTML”，找到</head>，在</head>的前面插入下面這段code，基本上就是你剛剛上傳的那些檔案。

   <SCRIPT src="scripts/shCore.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shLegacy.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushBash.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushCpp.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushCSharp.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushCss.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushDelphi.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushJava.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushJScript.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushPhp.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushPython.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushRuby.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="scripts/shBrushSql.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="shBrushVb.js" type="text/javascript"></SCRIPT>
   <SCRIPT src="shBrushXml.js" type="text/javascript"></SCRIPT>
   <LINK href="styles/shCore.css" type="text/css" rel="stylesheet" />
   <LINK href="shThemeDefault.css" type="text/css" rel="styleshee" />
   <SCRIPT type=text/javascript>
       SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
       SyntaxHighlighter.all();
   </SCRIPT>

   
   


3. 之後如果當你在貼程式碼的時候，就切換到html模式，用<pre class=”brush: xxx”></pre>的tag，把你的程式碼全部包起來，brush的地方視你所貼的程式碼而定，javascript的範例如下：要看brush對應的alias的話，可以到這個網頁去看。

   <pre class="brush: jscript">
     var test;
   </pre>

   
   

這樣就大功告成了，是不是很簡單呀，以後就可以在blog貼美美的source code了。