在 Google Blogger 中使用 SyntaxHighlighter 1.5.1

在撰寫網誌時，若是有使用到程式碼，可能多半會遇到將程式碼貼到網誌時，版面是一團混亂，目前筆者是使用 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. 請以下的範例，複製到 標籤的前面。

<link href="http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/

SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shCore.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushCpp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushCss.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushDelphi.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushPython.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushRuby.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushSql.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushVb.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/shBrushXml.js">
</script><script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf="http://syntaxhighlighter.googlecode.com/svn

/tags/1.5.1/Scripts/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

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

<textarea class="languages" cols="70" name="code" rows="50">... 需要呈現的程

式碼，請放置於此 .....</textarea>

or

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

</pre>