如何使用 SyntaxHighlighter 顯示程式範例

SyntaxHighlighter 是由 Alex Gorbatchev 開發，能夠在網頁中，用高亮度識別文字，來顯示程式碼範例的 JavaScript 系統。

public class HelloWorld { public static vodi main(String[] args){ System.out.print('Hello, world!'); } }
Alex Gorbatchev 這套 SyntaxHighlighter 系統，不僅預設的功能即符合大眾需求，往後也可以透過簡單的參數設定來調整功能，顯示出來的結果清爽又美觀，成為這類系統中最受歡迎的一款，可在官方專案庫下載：

http://github.com/syntaxhighlighter

最新版是 4.0.1，它不用設定組態，大幅簡化使用方式，但下載回來的檔案，必須另外用 glup 建置出完成品，無法直接使用。3.0.90 沒有提供 XRegExp，自行下載時版本不能太舊，又不能太新。因此本文使用舊版 3.0.83，下載回來就能用。

基本用法

首先示範如何以預設的高亮度主題，用來顯示 Java 程式碼。

步驟 1

下載後解壓縮檔案，然後將 scripts 與 styles 兩個資料夾，放在你的網頁專案裡面。

步驟 2

在你網頁的 head 標籤裡面，加入如下標記，但必須自行根據你網頁的相對路徑調整檔案來源：

<link href='styles/shCoreDefault.css' rel='stylesheet'> <script src='scripts/shCore.js'></script> <script src='scripts/shBrushJava.js'></script> <script> SyntaxHighlighter.all(); </script>

步驟 3

然後使用 pre 標籤來輸入 Java 程式範例，並指定 class 屬性為 brush:java，即能以高亮度來顯示程式碼。例如：

<pre class='brush:java'> public class HelloWorld { public static vodi main(String[] args){ System.out.print('Hello, world!'); } } </pre>

指定其它語言

有以下看檔名就知道是哪些語言的檔案可用：

shBrushAS3.js shBrushAppleScript.js shBrushBash.js shBrushCSharp.js shBrushColdFusion.js shBrushCpp.js shBrushCss.js shBrushDelphi.js shBrushDiff.js shBrushErlang.js shBrushGroovy.js shBrushJScript.js shBrushJava.js shBrushJavaFX.js shBrushPerl.js shBrushPhp.js shBrushPlain.js shBrushPowerShell.js shBrushPython.js shBrushRuby.js shBrushSass.js shBrushScala.js shBrushSql.js shBrushVb.js shBrushXml.js
其中，Cpp 是指 C++，Plain 是指純文字文件，HTML 的話則用 Xml。

將你想要的檔案加進去網頁後，再將 pre 的 class 屬性為 brush:xxx 即可。例如底下示範新增使用 Delphi 語言：

<script src='scripts/shBrushDelphi.js'></script> <pre class='brush:delphi'> program HelloWorld; begin writeln('Hello, world'); end. </pre>

改變高亮度主題

shCoreDefault.css 這個檔案就是預設的高亮度主題樣式，你可以改用以下檔案，來嘗試各種不同的高亮度樣式：

shCoreDjango.css shCoreEclipse.css shCoreEmacs.css shCoreFadeToGrey.css shCoreMDUltra.css shCoreMidnight.css shCoreRDark.css
補充一件事，其實 shCoreDefault.css 是 shCore.css 與 shThemeDefault.css 合併起來的檔案，如果希望常常切換主題樣式的話，可以先載入共通設定的 shCore.css，再載入其它不同的 shThemeXXX.css 來套用。

如果你希望所有主題的字型與大小都是統一的，其它 shThemeXXX.css 只是變換顏色而已，就適合用 shCore.css + shThemeXXX.css 的方式。反過來，希望每個主題的字體、位置、顏色都不一樣的話，就適合用 shCoreXXX.css 的方式。

進階設定

SyntaxHighlighter.config

space: ' ' useScriptTags: true bloggerMode: false stripBrs: false tagName: 'pre'

SyntaxHighlighter.defaults

'class-name': '' 'first-line': 1 'pad-line-numbers': false 'highlight': null 'title': null 'smart-tabs': true 'tab-size': 4 'gutter': true 'quick-code': true 'collapse': false 'auto-links': true 'unindent': true 'html-script': false 'toolbar': true