使用 Google Code Prettify 實現代碼高亮

今天這篇文章主要講述使用 google-code-prettify 來實現代碼的高亮顯示，以前我使用 highlight.js 來實現文章中代碼的高亮顯示。 prettify 非常小巧且配置簡單，使用它來實現代碼的高亮顯示是個不錯的選擇。下邊我們簡單看看 prettify.js 的使用方法：

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

<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script>
<scriptsrc="prettify.js"type="text/javascript"></script>

2.調用 prettify.js 實現代碼高亮

在 body 標簽上添加調用方法，如下：

<bodyonload="prettyPrint()">
</body>

將你需要高亮顯示的代碼片斷放在<pre>標記里，如下：

<preclass="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/

 

 

轉：http://www.lidongkui.com/use-prettify-to-highlight-code