Google Code Prettify是一個可以美化網頁上程式碼的小外掛,安裝方式非常簡單,可以參考官方發表的README檔案

安裝步驟:

  1. 下載原始檔案(官方網站似乎不提供host):
    http://google-code-prettify.googlecode.com/files/prettify-small.zip
  2. 在需要顯示程式碼的網頁加入下面程式:<link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
  3. (我的作法是將上述兩個檔案丟到Google Page Creator上面)
  4. 修改<body>標籤,加入onload="prettyPrint()"

 之後有需要顯示程式碼的地方,只要用<pre class="prettyprint">...</pre>或<code class="prettyprint">...</code>將程式碼包住即可。

(我猜直接連到http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css也可以,不過我就懶得測試了。)

在Google Blogger修改的方式如下圖:
(範本修改HTML、找到<head>將上述兩行程式放在<head>之後,再找到<body>將onLoad加在後面:<body onLoad="prettyPrint()")

image