看到這篇《網頁程式碼美化程式 Google Code Prettify》的介紹，我也試裝了一下。果然所有程式碼的列表，自動有了 syntax highlighting。

Google Code Prettify 的特色是，用的時候不需要指定語言，會自動偵測。我們「唯三」需要做的，就是：

  1. 在 <header> 引入 google-code-prettify 的 css 與 javascript 檔。
  2. 將你要做 syntax highlighting 的程式碼，寫在 <pre> 裡，並賦予 prettyprint 的 CSS class。
  3. 在文件全部載入之後，呼叫 prettyPrint() 函式。

由於我有一堆文章，已經把程式碼放在 <pre>，使用 code 這個 CSS class 標示，因此，我需要做一些額外的處理，把這些 <pre class="code"> 找出來，再多加上 prettyprint 的 CSS class。

將 google-code-prettify 抓下來解開後[1]，會有兩個檔：prettify.css 與 prettify.js，一起放到 theme 目錄下即可。因為 Y!UI 很好用，所以我就偷懶直接依靠 Y!UI。修改 wordpress 佈景主題的 header.php 檔[2]，在 </head> 之前，加入以下的程式碼：

    ...

    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js"></script>    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js"></script>    <link type="text/css" href="<?php echo get_template_directory_uri(); ?>/prettify.css" rel="stylesheet"/>    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/prettify.js"></script>    <script type="text/javascript">    YAHOO.util.Event.addListener(window, 'load', function(){        var pre_elems = YAHOO.util.Dom.getElementsByClassName('code', 'pre');        for (var i = 0; i < pre_elems.length; ++i) {            YAHOO.util.Dom.addClass(pre_elems[i], 'prettyprint');        }        prettyPrint();    });    </script></head>

這段程式是說，利用 Y!UI 的 DOM library，把網頁裡，有加 code 這個 class 的 <pre> 全部抓出來後，另外再多加一個 prettyprint 的 class。然後，再呼叫 prettyPrint() 這個 google-code-prettify 的啟動函式。這整段程式，一樣利用 Y!UI 的 DOM，設定成在載入完畢後呼叫。

裝好之後，各位應該可以看到，在文件載入完全之前，程式碼列表裡面還不會有 syntax highlighting，字都是黑的。等到文件一載入完全，keywords 就會變色。

  1. 我是直接用 svn checkout。 ↩
  2. 理論上，應該要作成 wordpress plug-in 比較好，但因為我沒弄過，所以就先直接寫在 header.php 裡。 ↩