使用 Google Prettify 實現(xiàn)代碼高亮

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

下邊我們簡單看看 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.調(diào)用 prettify.js 實現(xiàn)代碼高亮

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

使用jQuery小技巧實現(xiàn)優(yōu)化

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

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

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