在 Blogger 中使用 google-code-prettify 顯示程式碼
google-code-prettify 是一支不錯的程式碼高亮度顯示程式,特點為:
- 支援 15 種程式語言(但某些語言似乎還沒完成)
- 程式僅兩個檔案
- 載入速度較快
缺點為:
- 跟 IE 的相容性比較不佳,在 IE 內複製程式碼時無換行符號
- 無行號顯示
- 僅支援 "<pre>" 區塊
- 程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決)
安裝步驟
- 修改 blogger 樣板,搜尋 "</head>",在 "上方" 加入
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' /> <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>
(因為 "偷吃步" 的關係,程式直接連到 google-code-prettify 的 SVN 上,你可以視情況下載回來放到自己的伺服器)
- 繼續搜尋 "<body>",在標籤內的 onload 事件加入:
prettyPrint();
- 儲存即可。
使用方法
- 使用 "<pre>" 區塊,需將 "&" 轉換為 "&"、"<" 轉換為 "<"、">" 轉換為 ">":
<pre class="prettyprint"> 程式碼 </pre>
我也在用這個,感覺很好用。
蠻好用的!這樣一來要擺出程式範例就方便多了!!