在撰寫網誌時，若是有使用到程式碼，可能多半會遇到將程式碼貼到網誌時，版面是一團混亂，目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。
這個是在客戶端的瀏覽器上執行，所以只要瀏覽器有支援，應該都可以正確顯示。
關於 SyntaxHighlighter
日期：2010/07/02
截至目前為止 SyntaxHighlighter 最新的版本：3.0.83。
新增加的功能：
Dynamic Brush Loading、No Flash Copy To Clipboard、Code Selection、Block Title、CommonJS、Improved CSS support等。
軟體授權方式：
在 SyntaxHighlighter 2.0 以上的版本，其授權模式採取 Donationware。
建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。
請參考以下的說明：
Please donate to keep development active!
GNU Lesser General Public License
GNU較寬鬆公共許可證
關於複製區塊內的程式碼方式，也變得十分簡潔，方法如下：
1. 在程式碼區塊內，滑鼠左鍵連點兩下。
2. 就可以自動全部選取此區塊內的程式碼。
3. 若要複製，請搭配快捷鍵：Ctrl+C。
在 SyntaxHighlighter 3.0.83 版本上，一改 SyntaxHighlighter 2.x 版本上被垢病的flash執行效能、額外的圖示等問題。
請注意：
SyntaxHighlighter 3.0.83 版本與 SyntaxHighlighter 1.5.1 在張貼程式碼所使用的區塊寫法是不同。
這在升級前，請您務必留意。
以下以 Google 的 Blogger 搭配使用 SyntaxHighlighter 為範例：
工作1：修改範本來使用 SyntaxHighlighter
步驟01. 進入「Blogger」，點選「設計」\「修改 HTML」。
步驟02. 在「修改範本」區域，搜尋到標籤 <head> 。
步驟03. 貼上以下的範例程式碼：
<!-- 設定載入 shCore.css 與 shThemeDefault.css --> <link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.css" rel="stylesheet" type="text/css"/> <link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shThemeDefault.css" rel="stylesheet" type="text/css"/> <!-- 設定需要載入的核心檔案 shCore.js --> <script src="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.js" type="text/javascript"/> <!-- 設定需要載入的程式語言檔案 --> <script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushCSharp.js' type='text/javascript'/> <script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushJScript.js' type='text/javascript'/> <script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushSql.js' type='text/javascript'/> <script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushVb.js' type='text/javascript'/> <script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushXml.js' type='text/javascript'/> <!-- 設定啟用 highlighter --> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all() </script>
步驟04. 點選「儲存範本」。
提醒您：
1. 請將 http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/ 置換為您所使用的網頁位址。
若不介意的話，或許可以直接引用本站的範例碼來使用，也是可行的方法。
關於可以使用程式語言，請參考以下的資料，增加或是置換所需的檔案名稱(File name)：
Bundled Brushes
2. 因為筆者使用的是 Blogger，所以需要設定以下的參數：
SyntaxHighlighter.config.bloggerMode = true;
工作2：張貼程式碼的方式
步驟1. 爾後在編寫網誌，在張貼程式碼時，注意事項如下：
1. 請使用標籤 <pre> ...</pre> 區塊來存放程式碼。
2. 在屬性 class 部分，請填入「brush: 程式語言代碼」，其中「程式語言代碼」是指「Brush aliases」的名稱。
支援的「程式語言代碼」 Bundled Brushes
請範例如下：
您的程式碼請貼此處。
若您的程式碼，有使用到html ，或許可以使用以下的方式來轉換：
Postable | Making your code friendly
筆者僅使用了部分功能，有興趣，請參考官方網頁的說明。
SyntaxHighlighter What's new
相關準備工作：
1. 利用Google的「協作平台」，建立「檔案櫃」，可以來存放存放網頁、相關檔案等。
Google 協作平台
請參考以下的圖示：
2. 下載 SyntaxHighlighter
參考資料：
SyntaxHighlighter
SyntaxHighlighter 參數 Configuration
在 Google Blogger 中使用 SyntaxHighlighter 1.5.1
您好,
回覆刪除這篇文章寫的真好, 我想借用sites裡的SyntaxHighlighter在我的Blogger裡使用, 希望您不介意, 謝謝
沒問題，請享用...^_^
回覆刪除您好，我引用了您部落格的語法
回覆刪除因為我引用官方的一直無法成功~
謝謝了!
沒問題，開心使用...^_^
回覆刪除我也是使用Google 的 Blogger,結果我加上了
回覆刪除SyntaxHighlighter.config. = true;
效果就沒有出來，拿掉之後就正常了！