[HTML] Prettify 代碼高亮使用總結，prettify高亮

[HTML] Prettify 代碼高亮使用總結，prettify高亮

========================================================

作者：qiujuer

部落格：blog.csdn.net/qiujuer

網站：www.qiujuer.net

開源庫：Genius-Android

轉載請註明出處：http://blog.csdn.net/qiujuer/article/details/41413059========================================================
Prettify 是什嗎？

Prettify 是一款 HTML 程式碼高亮外掛程式，可以讓你的網站代碼顯示更具特色。在我的使用中它不是最優秀的，但是卻是非常不錯的。光說沒用要給大家看看才行。

ShowTime

這兩個是經過一定自訂後的顯示介面，其不用自訂一樣好看，自訂一般來說就是更改背景與邊框。下面講講怎麼弄弄；實踐出真知。

CodeTIme1.建立HTML檔案，添加 pre 節點，節點中弄些 HTML 程式碼。

<pre>    // 非同步方式    // 結果以事件回調方式返回    Command command = new Command("/system/bin/ping",            "-c", "4", "-s", "100",            "www.baidu.com");    Command.command(command, new Command.CommandListener() {        @Override        public void onCompleted(String str) {            Log.i(TAG, "onCompleted：\n" + str);        }        @Override        public void onCancel() {            Log.i(TAG, "onCancel");        }        @Override        public void onError() {            Log.i(TAG, "onError");        }    });</pre>

這時運行：

這個時候是沒有任何的樣式的，現在開始加入代碼美化。

2.首先引入 css 樣式和 js ：

    <link href="prettify.min.css" rel="stylesheet">    <script src="run_prettify.min.js"></script>

3.然後給 pre 節點加上一個 class 屬性：

<pre class="prettyprint lang-java">...</pre>

prettyprint 的作用是申明使用 Prettify 代碼高亮外掛程式，當加上該屬性時 Prettify JS 會掃描當前頁麵包含有該屬性的 pre 然後使用代碼高亮美化；當然同時也是為了引入對應的css樣式。後面的 lang-java 是給  Prettify 外掛程式指定當前 pre 的內容格式， Prettify 將會根據其屬性掃描其中對應的節點進行上色。比如 指定 lang-html 那麼其將會掃描其中，發現 html body div 等將會進行上色處理，而指定 lang-java 將會更加 Java 的特性進行對應的上色處理。當然其並不是必須的，你可以指定 lang-other 也可以不指定該樣式。

現在看看樣式咋樣;

還不錯吧？

當然還可以自訂一定的樣式，具體可以修改 css 檔案；這裡不深入介紹。可以來個簡單的，比如邊框和背景改改：

這裡咱們就直接在 Html 頁面使用：

Head 部分加入;

    <style>        pre.prettyprint        {            border: 2px dashed #888;            background: #ddd;        }    </style>

Show：

這個樣式可以了吧？甚至可以背景直接為黑色 這個也是可以的。

到這裡其實使用上已經差不多了；不過還有一些其他的東西。

About：1.在上面引入 JS 的時候;

<script src="run_prettify.min.js"></script>

這裡使用的是 run_prettify ，其與 prettify 的區別在哪裡？

簡單來說 run_prettify 就是可以自主觸發，在載入完成後自動完成渲染工作。假如使用 prettify JS 我們需要在頁面載入完成時調用如下方法：

    <script>        window.onload = function ()        {            // Load Prettify            prettyPrint();        }    </script>

當然 run_prettify 還會去它的代碼託管下載其他的一些 JS 來完成對應的其他語言支援。

2.CDN 加速：

www.bootcdn.cn/prettify/

在這裡有最新的 CDN 加速，可以免去把檔案 弄到項目中的煩惱，速度也還不錯。

值得一說的是，如果有特殊語言 （lang-）支援的話，還需要包含對應的 JS，比如 CSS：

3.最新的原始碼和使用的 css 與 JS 打包

絕對官方沒有修改過：

CSDN 下載

4.本次的源碼下載：

CSDN 下載

========================================================

作者：qiujuer

部落格：blog.csdn.net/qiujuer

網站：www.qiujuer.net

開源庫：Genius-Android

轉載請註明出處：http://blog.csdn.net/qiujuer/article/details/41413059========================================================