搜尋本站文章

2007-12-25

在 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 Gorbatchev
http://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 的動作給覆蓋。