Blogger加掛SyntaxHighlighter，顯示漂亮的彩色程式碼

Syntax Highlighting是一種讓程式碼更容易閱讀的方法，透過不同色彩及字體的標示，讓閱讀者更容易分辨變數、保留字、函式等關鍵字。

以PHP來說，最常用的Syntax Highlighting工具就是老牌的GeSHi，它支援的程式語言種類之多，讓人冒出驚嘆號！而且直到最近它一直都有在維護、改良，我在一個星期前發現它新版不能正確解析Scheme程式語言的程式碼，把bug提交給GeSHi開發者的Issue Tracker，結果很快就釋出改正的新版本。

然而GeSHi需要在伺服器端做處理，如果是自己架設的部落格，要整合GeSHi並不難，而且通常都有現成的外掛可用。

但是以Blogger這種放別人家的網誌服務，就沒辦法用簡單的方法整合GeSHi。

幸好有syntaxhighlighter的出現，僅靠瀏覽器端執行的JavaScript就可以達到相同效果。

最新的syntaxhighlighter版本已經移到這裡「SyntaxHighlighter  3.0.83」，目前仍有在持續維護。雖然支援的程式語言種類沒有GeSHi那樣包山包海，但對於常見的程式語言來說(如下列表)，已經相當夠用了。
AS3, Bash, ColdFusion, CSharp, Cpp, Css, Delphi, Diff, Erlang, Groovy, JScript, Java, JavaFX, Perl, Php, Plain, PowerShell, Python, Ruby, Scala, Sql, Vb, Xml

使用SyntaxHighlighter對網頁的SEO也是有幫助的，因為程式碼在HTML原始碼中是完整的呈現，像Pastebin.com用JavaScript的方式內嵌，實際網頁原始碼根本沒有包含程式碼；同時，在最後輸出給瀏覽器的HTML中，<pre>...</pre>之間是原始的程式碼文字，並不會被加入額外的HTML標籤。所以瀏覽者在搜尋時，關鍵字若出現在網誌提供的程式碼中，文章就會更有機會被找到。

讓人興奮的是，SyntaxHighlighter有提供公開的Hosted Version，這意味著純粹使用Blogger寫網誌，而沒有申請其他檔案寄存服務的使用者，並不用再麻煩地去註冊一個空間來放所需的檔案，也不必偷偷使用別人的連結。設定的步驟相當簡單，請參考以下設定步驟。

SyntaxHighlighter預設已有不錯的行號顯示：

在Blogger的後台，打開「設計」、「修改HTML」。

先找到<b:skin>標籤，在此標籤前加入以下代碼。

<!-- SyntaxHighlighter  3.0.83-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

再找到</body>標籤，在標籤前加入以下代碼。

<!-- SyntaxHighlighter  3.0.83-->
<script type='text/javascript'>
     SyntaxHighlighter.all()
</script>

完成修改後，儲存。

接著在編輯網誌文章時，使用「修改HTML」模式，使用<pre>標籤來呈現程式碼，而class屬性則設為「brush: 程式語言代碼」，程式語言代碼請參考在文章開頭的SyntaxHighlighter已支援程式語言列表。

<pre class="brush: groovy">
println 'Hello World'
println 1 + 2 + 3
</pre>

另一個議題是，當我們要放的程式碼文字，包含了HTML的特殊字元，例如大於>、小於<等，這時候就需要用HTML編碼工具先轉換好，否則Blogger會認為文章包含不合法的HTML標籤。

如果您使用的瀏覽器剛好是先進的Firefox，可以參考我們先前發表過的Blogger HTML Encode文章，使用我們開發的Greasemonkey Script即可以輕鬆解決這個問題。