代碼高亮工具

這裏我們通過google-code-prettify來爲代碼實現高亮的功能。

通過富文本編輯工具添加的代碼會用<pre></pre>標籤包裹。pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現爲等寬字體。

我們就是通過對這些標籤加上一些樣式來實現代碼的高亮。

一、下載並引用

天朝的程序員辛苦啊，找個資料還得想辦法翻牆，這裏提供免積分下載地址:http://download.csdn.net/detail/yangnianbing110/8150727，解壓之後在得到文件prettify.css，prettify.js。在我們的頁面上引入這兩個文件。

    <link rel='stylesheet' href='/stylesheets/prettify.css' />
    <script type="text/javascript" src="/javascripts/prettify.js"></script>

二、讓它們幹活

樣式和js都引入進來了，我們還需要讓他們工作。在body中添加一個onload事件

<bod οnlοad="light()">
function light(){
    $("pre").addClass("prettyprint");
     prettyPrint(); //這裏這個函數調用不知道幹啥，沒有仔細去看源碼，感覺高亮代碼的話，無非就是添加一個樣式
}

然後顯示效果如下圖