來記錄一下如何在痞客幫安裝程式碼上色工具: SyntaxHighlighter

官方網站：http://alexgorbatchev.com/SyntaxHighlighter/
安裝版本：2.1.382
下載位址：http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382

前置動作

首先，下載syntaxHighlighter_2.1.382.zip，並解壓至電腦中任意目錄下

接著挑選一網路空間，將解壓出來的scripts、styles這兩個目錄及目錄中的檔案上傳至網路空間
如果找不到或是不想使用自己的空間，亦可使用SyntaxHighlighter官方提供的hosting服務

在此我用官方的hosting來做示範
我們會用到以下兩個目錄中的檔案

http://alexgorbatchev.com/pub/sh/2.1.382/styles/
及
http://alexgorbatchev.com/pub/sh/2.1.382/scripts/

其中，styles為佈景檔案，scripts為程式碼
除了/scripts/shCore.js 及 /styles/shCore.css 為必要的檔案之外
其餘的檔案都可以隨各位的需要做調整，以下列出佈景列表及支援的程式碼列表

Blog的設定

進入blog的後台 –> 部落格管理 –> 側邊欄位設定

依序放入以下內容

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" />
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js"></script>
<!-- brush begin -->
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js"></script>
<!-- brush end -->

其中在第2行設定CSS檔案的部分，可以選用其他種佈景方式，如上表所列，只需要改連結的檔案即可
而5~10行的內容，則是可以依照自己的需求做增刪

最後再放入以下程式碼即設定完成

<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
    SyntaxHighlighter.all();    
</script>

如何插入程式碼於文章內？

首先，要先將程式碼做HTML Encode的動作 (ex: 將 "<" 變成 "&lt;" )
這部分可以利用一個網站：HTML Encoder
將程式碼貼到「Encode input text:」後，按下「Encode」即可完成Encode的動作

接著進入到部落格的後台，文章編輯器，切換到HTML模式

然後，在想要出現的位置插入下列HTML

<pre code="brush: js">
/** Add code here **/
function HelloWorld(){
    alert("Hello the World");
}
HelloWorld();
</pre>

將第一行的「brush: js」 改為欲顯示的程式語言種類 (請見第二個表格的程式語言別名)
並將Encode後的程式碼貼在<pre></pre>標籤之中

需要注意的是，必需要引入對應的js檔才可以正常顯示該種語言 (請見第二個表格的程式語言檔案)

最後進行存檔就可以看到成果了！

成果如下：

/** Add code here **/
function HelloWorld(){
    alert("Hello the World");
}
HelloWorld();

後記 

SyntaxHighlighter 最新版本為 3.0.83 ，但是最新版還有一點小Bug，所以這篇文章使用較為穩定的 2.x

如果想要更換版本的話，可以直接修改官方Hosting的路徑

http://alexgorbatchev.com/pub/sh/[VERSION]

將 [VERSION] 改為想要的版本即可，若想使用最新的版本，可將 [VERSION] 改為 current

參考來源：http://alexgorbatchev.com/SyntaxHighlighter/