作者：qiujuer

博客：blog.csdn.net/qiujuer

網站：www.qiujuer.net

開源庫：Genius-Android

Prettify 是什么？

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

ShowTime

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

CodeTIme

1.建立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