從 JSPWiki 移轉到 Blogger 以來，最大的困擾除了語法不能像 Wiki 那麼簡潔之外，另一個問題就是程式碼在顯示上不能像 JSPWiki 有一些 plug-in 可使用。
一個方式大概就是利用 Format My Source Code For Blogging 的服務，可以產生格式化的語法。然後貼到 Blogger 上。
但是這種方式其實只是把原始碼稍微排版一下而已（近似於原本 Wiki 的 {{{、}}} 語法）。另一種方式就是利用類似 Hightlight Code Coverter: 將排版後的程式碼轉換成 HTML 輸出 的工具輸出 HTML 後再貼上。
不過這些方式都要繞一大圈才能。這裡介紹一種或許比較好的方式（支援高亮度顯示）；利用 syntaxhighlighter。
syntaxhighlighter 支援了大部分常見的程式語言，如 C++、Java、C# 等（完整列表見此列表）。
使用方法
- 首先到 syntaxhighlighter 下載 StyleHighlighter 原始碼
- 將壓縮檔內的 Scripts 和 Styles 目錄解壓到可公開存取的網站目錄內
- 修改您的 Blogger 的範本，加入如下程式碼
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> <script language="javascript" src="js/shCore.js"></script> <script language="javascript" src="js/shBrushCSharp.js"></script> <script language="javascript" src="js/shBrushXml.js"></script> <script language="javascript"> window.onload = function(){ dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); } </script> - 最後在以下列語法修改包含原始碼的 HTML 片段：
- 利用 <pre> tag，並設定 name 屬性為
code、class 屬性為對應的程式語言代碼（參考此表）<pre name="code" class="c-sharp"> ... some code here ... </pre>
- 利用 <textarea> tag。
<textarea name="code" class="c#" cols="60" rows="10"> ... some code here ... </textarea>
- 利用 <pre> tag，並設定 name 屬性為
範例
<html>HTML 測試</html>collapse
nogutter
注意事項
- 使用 <pre> 來包含程式碼時，中若是程式碼中有 < 符號，則必須將其置換為 <，否則原始碼可能會被截斷。
- 在 class="xxx" 中可以利用「:」指定額外的控制參數。詳細控制參數列表參考此表
發表文章
沒有留言:
張貼留言