闇月千瞳的部落格: 使用 SyntaxHighlighter

什麼是 SyntaxHighlighter 呢？在它的網站上可以找到以下這段解釋：

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

它採用了 LGPL 3。

在 SyntaxHighlighter 1.5.1 版以前，SyntaxHighlighter 是放在 Google code 上的，根據 http://code.google.com/p/syntaxhighlighter/ 網頁上的說明，自 SyntaxHighlighter 2.0 版開始則搬家到 http://alexgorbatchev.com/wiki/ 了。

SyntaxHighlighter 吸引我的理由是它會自動為程式碼加上「行號」，這點比 google-code-prettify 優，因為如此一來當程式碼篇幅較大時，閱讀起來也方便許多。但 SyntaxHighlighter 在使用時除了框住程式碼，還得告訴它這段程式碼所使用的語言，相較之下，google-code-prettify 又較為聰明。

不過，SyntaxHighlighter 的設定相對地也麻煩些，之前嘗試使用 1.5 版時，總是被 <br /> 搞得快瘋了，怎麼弄都搞不定。幸好 SyntaxHighlighter 2.0 在設定上比起 1.5 / 1.5.1 版問題少了些。

同樣地，進入 Blogger 版面配置的「修改 HTML」裡，然後將以下這段加到 <head> 及 </head> 之間。

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css" id="shTheme"/>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = 'http://http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script

在 http://alexgorbatchev.com/wiki/SyntaxHighlighter 上提供了 Hosting 的使用方法，這裡我選擇使用 2.0.320 這個版本，原本我嘗試使用 current 的連結，但似乎有點問題，始終無法正確描繪程式碼的 Syntax，所以最後修改成使用 2.0.320 這個版本。

儲存之後，張貼程式碼只要使用 <pre class="brush: js"> </pre> 這樣的語法將程式碼框住就可以了。

不過，SyntaxHighlighter 需要指定程式碼所使用的語言，其中例如 class="brush: js" 表示這段程式碼使用 Javascript。在 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes 這一頁裡列出了 SyntaxHighlighter 支援的語言種類。以下列出其中幾個：

Bash / shell：class="brush: bash" 或 class="brush: shell"
C#：class="brush: c-sharp"
C++：class="brush: cpp" 或 class="brush: c"
Diff：class="brush: diff" 或 class="brush: patch"
Java：class="brush: java"
Python：class="brush: python"
XML：class="brush: xml"

延伸閱讀：