使用google-code-prettify高亮顯示網頁代碼

前記：因為博客系統中的Web Editor使用的是KindEditor，它默認保存的時候，保存的內容是<pre class="prettyprint lang-html"></pre>而不是<pre name="code"></pre>

所以用其他的語法提示比較麻煩，而我又比較的懶，所以直接用google-code-prettify了

使用說明：

首先添加文件
　　

<link rel="Stylesheet" type="text/css" href="prettify/prettify.css" />
<script type="text/javascript"  src="prettify/prettify.js"></script>

 當然如果你覺得默認樣式不好看，可以自己修改，這里我就直接在HTML頁面修改了，因為它默認不換行，所以顯得不是那么的友好

<style type="text/css">
        pre {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }
</style>

默認不顯示行號，這里我們可以寫如下的代碼，使之顯示行號，但是貌似不完整，大家如果有更好的方法告訴我哦

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

最后就是調用了，可以寫在body的onload事件中，但是不建議，這里我們用jquery，在DOM節點加載完之后就調用

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