在 Google Blogger 中使用 SyntaxHighlighter 1.5.1

更新日期： 2010/10/07

在 Google Blogger 中使用 SyntaxHighlighter 3.0.83
http://sharedderrick.blogspot.com/2010/10/google-blogger-syntaxhighlighter-3083.html

---

更新日期：
2009/05/25
SyntaxHighlighter 作者已經更新到版本為 2.0.320 。

請參考以下的網址：
SyntaxHighlighter - Alex Gorbatchevhttp://alexgorbatchev.com/wiki/SyntaxHighlighter
但在 SyntaxHighlighter 2.0 以上的版本，其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。請參考以下的網址：
SyntaxHighlighterDonate
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

Donationware
SyntaxHighlighter is donationware. If you are using SyntaxHighlighter 2.0 on your site or including it in your product, please donate.

Retrieved from http://alexgorbatchev.com/wiki/SyntaxHighlighter

---

在撰寫網誌時，若是有使用到程式碼，可能多半會遇到將程式碼貼到網誌時，版面是一團混亂，目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。這個是在客戶端的瀏覽器上執行，所以只要瀏覽器有支援，應該都可以正確顯示：

下載網址
dp.SyntaxHighlighter ， Version: 1.5.1
http://code.google.com/p/syntaxhighlighter/

作者的網址：
http://www.dreamprojections.com/syntaxhighlighter

筆者以在 Blogger 中使用 SyntaxHighlighter 來介紹：
步驟1. 先去 SyntaxHighlighter 下載檔案。
步驟2. 到 Google Pages 申請免費的網頁存放空間。

http://pages.google.com/

因為 Google 已經停止 Google Pages。請改用其他方式來存放相關的程式碼，例如，使用 Google Code 等等。

Google Page 提供數項功能：
A. 提供免費的工具，協助您製作網頁、發行網頁。
B. 目前是提供 100 MB 的空間可供使用。
C. 提供多樣的佈景主題、版面等等可以自選。
...
請參考此處說明：http://pages.google.com/-/about.html#using

步驟3. 將檔案解開來後，在 1.5.1 版本中，解壓縮後，將會有 3 個資料夾；請將以下的檔案，全部上傳到先前申請 Google Pages 的空間上：

A. Scripts 資料夾內的程式(*.js 與 *.swf) 。
B. Styles 資料夾內的 SyntaxHighlighter.css。
步驟4. 登入您的 Blogger。
步驟5. 點選[版面配置]\[範本]\[修改 HTML]。
步驟6. 請以下的範例，複製到 </body> </html> 標籤的前面。

<link href="http://DerrickLaLa.googlepages.com/SyntaxHighlighter.css" type="text/css" rel="stylesheet"></link>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shCore.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCpp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCSharp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCss.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushDelphi.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJava.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJScript.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPhp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPython.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushRuby.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushSql.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushVb.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf="http://DerrickLaLa.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

提醒您：
1. 請將 DerrickLaLa.googlepages.com 置換為您所申請的網頁空間。
2. 若是 Google Page 停止申請，您若不介意的話，或許可以直接引用本站的範例碼來使用，也是可行的方法。
或是您可以連線 SyntaxHighlighter 作者提供的網址：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting

裡面由 1.5.1 版本到目前最新的版本 2.0.320 等都有提供，請自行參考。

但此網站的網路頻寬部分，筆者也不清楚，此外，若您要使用 2.0 以上的版本，其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。請參考以下的網址：SyntaxHighlighter/Donatehttp://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

步驟7. 在撰寫網誌時，若是需要貼上程式碼時，可以搭配以下的使用方式：

<textarea class="languages" name="code" rows="50" cols="70">
... 需要呈現的程式碼，請放置於此 ...
</textarea>

或是

<pre class="languages" name="code">
... 需要呈現的程式碼，請放置於此 ...
</pre>

其中 languages 部分，目前所支援有：
C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML/HTML 等等。
請參考以下列表，將指定的語言之 Aliases 置換到 languages 的位置上。

支援的語言

Here's a list of supported languages and their aliases:

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

步驟8. 另外，因為 Blogger 會將程式碼的最後面，新增一個換行符號<BR>，所以直接使用 SyntaxHighlighter 可能會有問題，請啟用 BloggerMode 即可解決此問題，範例碼如下：

dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

請參考：
BloggerMode 的說明http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode

筆者在步驟6. 的範例碼中，是已經包含啟用 BloggerMode 的程式碼。

步驟9. 請測試是否 SyntaxHighlighter 與 BloggerMode 有正常運作。


補充說明：
某些朋友在使用時，可能發覺在編寫一篇文章時，SyntaxHighlighter 並沒有動作，但 SyntaxHighlighter 是需要等到此文章發行到部落格上後，才能看到的效果。
採用 SyntaxHighlighter 的方式，這是將耗用掉客戶端的系統資源來執行 Java script。
所以如果下載網路速度慢，客戶端系統的硬體效能不佳，這是會有影響的。
可以參考官方的討論：How to use SyntaxHighlighter.
http://code.google.com/p/syntaxhighlighter/wiki/Usage


考慮使用 klein.stephane 所建議的，增加：window.onload = function () 或是 ashwin.jayaprakash 所設計的函數來改善...等等方式來處理。

今舉一個範例如下：

修改為：

此外，還有以下的事情需要留意：
window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成後，才進行執行。
但若是您先前也有程式使用 window.onload 的話，這將是會把前一個 window.onload 的動作給覆蓋。