在Blog文章中使用SyntaxHighlighter分享程式碼 | Add SyntaxHighlighter to Blog Article

在文章中分享程式碼的方法有很多種，《SyntaxHighlighter》是其中兼具實用、美觀與方便的一個。 SyntaxHighlighter是開發者Alex Gorbatchev使用JavaScript開發的開放原始碼插件，方便程式開發者在網頁中展現程式碼。 此插件有兩種使用方法，一種是：把檔案下載下來，並且上傳到自己的伺服器。 情況允許的話，這是最好的方法，速度較快，又能降低官方的伺服器負擔。 第二為：連上官方伺服器來使用插件，這比較方便，但是速度比較慢、又會增加官方伺服器的負擔，因為這個插件是不收費的，官方的伺服器租金由開發者自行負擔，因此開發者開放大家自由贊助。 而這裡主要分享的是使用官方伺服器檔案的方法。

首先我先解釋插件結構，假設我要分享的程式是JavaScript，那我要放入Html的程式為：

是的，只有這樣，不需要一大串落落長的程式，其實你需要的就這樣，為什麼？待我來一一解釋。 SyntaxHighlighter（以下簡稱SH）的程式主要分為三大區塊：

1. 程式核心檔案

shCore.js為SH的程式核心，不可缺，也不需要改。
shBrushJScript.js為SH渲染程式碼的方針，如果你放的不是JavaScript，就需要修改這行程式。 渲染方針可以在官方的渲染方針說明頁中找到。

修改範例：
如果你很清楚你要放的是什麼類型的程式碼的話，只需要修改範例中的『shBrushJScript.js』這段就好，本範例設定是JavaScript，如果我要改為ActionScript3的話，只需要把此改為『shBrushAS3.js』即可。

如果你不知道你要放的是什麼類型的程式，或者你單一文章中同時要放入多種類型的程式碼，又或者你太懶不想改。 你需要在shBrush之前放入：

shAutoloader.js為SH自動判斷渲染方針的程式，前提是你不知道自己放的類型是什麼，否則盡量少用，以降低官方伺服器的負擔。
之後把你文章中會放入的程式碼種類相對應的渲染方針檔案全放入底下行列，比如說我同時需要展現JavaScript和ActionScript3的話，就會是：

如果真的懶到不行的話，你也可以把全部23個渲染方針全部放到底下，然後讓判斷程式自己去抓要用的渲染方針。 但這麼做沒什麼好處，文章的讀取速度會變慢，也會增加官方伺服器的負擔。

2. 風格檔案

shCore.css為SH的核心CSS檔案，有基本的程式碼呈現效果。
shThemeEclipse.css為SH展現主題的CSS檔案，也就是佈景主題。 如果想要改成別的主題，就需要修改這行程式碼。 佈景主題的種類與檔案名稱可以在官方的佈景主題說明頁找到。

修改範例：
目前範例中的設定是Eclipse主題，如果我要將此改為預設主題的話，把連結中的『shThemeEclipse.css』改為『shThemeDefault.css』即可。

3. 其他設定
此為在最後的<script type="text/javascript">與</script>之間放入的設定。 假如你的部落格平台為Blogger，就需要加入『bloggerMode=true』，預設的API設定為『all()』，API設定不太需要去改。 相關設定說明同樣可以在API說明頁找到。

4. 使用程式
在開頭設定完後，之後要在文章內引用程式碼，只需要在程式碼前後分別加入<pre class="brush: js;">… </pre >就好了。 需要修改的部分為『js』，如果該段程式碼為ActionScript3的話，要將此改為『as3』，變成brush: as3，依此類推。

相關連結：
SyntaxHighlighter官方網站