在 Blogger 中使用 google-code-prettify 顯示程式碼

發表於 2007-07-28 由 citypig

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 class="prettyprint">
程式碼
</pre>

參考網頁

使用 dp.SyntaxHighlighter 顯示程式碼

您可能會對以下這些文章感興趣

本篇發表於 blogger 並標籤為 blogger。將永久鍊結加入書籤。

在 Blogger 中使用 google-code-prettify 顯示程式碼有 2 則回應

caixw 說道：

2010-05-31 at 12:42

Using Mozilla Firefox 3.6.3 on Windows XP
我也在用这个，感觉很好用。

回覆
元兒～說道：

2010-06-23 at 19:18

Using Mozilla Firefox 3.6.3 on Windows XP
蠻好用的！這樣一來要擺出程式範例就方便多了！！

回覆

發表迴響取消回覆