使用 Google Prettify 實現代碼高亮

今天這篇文章主要講述使用 google-code-prettify 來實現代碼的高亮顯示，prettify 非常小巧且配置簡單，使用它來實現代碼的高亮顯示是個不錯的選擇。

下邊我們簡單看看 prettify.js 的使用方法：

1.引入 jQuery 文件和 prettify.js 文件

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="prettify.js"type="text/javascript"></script>
<link href="/prettify.css" type="text/css" rel="stylesheet" />
2.調用 prettify.js 實現代碼高亮

在 body 標簽上添加調用方法，如下：
<body onload="prettyPrint()">
</body>
將你需要高亮顯示的代碼片斷放在 pre標記里，如下：
<pre class="prettyprint">
    @*你的代碼片斷*@
</pre>

使用jQuery小技巧實現優化

上述方法可以實現代碼的高亮，但每次手動為pre標簽添加"prettyprint"類，顯示有些麻煩。
使用下邊的代碼片斷來解決這個問題并替換掉 body 的"onload"的事件，實現分離：

$(window).load(function(){
　　$("pre").addClass("prettyprint"); prettyPrint();
})

到這我們應該已經成功使用 prettify.js 實現了代碼的高亮顯示，為了提高頁面加載速度，我們應該將引用的js文件放置在底部
下載地址：http://code.google.com/p/google-code-prettify/