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

作者：qiujuer

網(wǎng)站：

轉(zhuǎn)載請注明出處：外鏈網(wǎng)址已屏蔽

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

Prettify 是什么？

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

ShowTime

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

CodeTIme

1.建立HTML文件，添加 pre 節(jié)點，節(jié)點中弄些 HTML 代碼。

// 異步方式

// 結(jié)果以事件回調(diào)方式返回

Command command = new Command("/system/bin/ping",

"-c", "4", "-s", "100",

"");

mand(command, new mandListener() {

@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");

}

});

這時運行：

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

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

3.然后給 pre 節(jié)點加上一個 class 屬性：

...

prettyprint 的作用是申明使用 Prettify 代碼高亮插件，當(dāng)加上該屬性時?Prettify JS 會掃描當(dāng)前頁面包含有該屬性的 pre 然后使用代碼高亮美化；當(dāng)然同時也是為了引入對應(yīng)的css樣式。后面的 lang-java 是給??Prettify 插件指定當(dāng)前 pre 的內(nèi)容格式，?Prettify 將會根據(jù)其屬性掃描其中對應(yīng)的節(jié)點進(jìn)行上色。比如 指定?lang-html 那么其將會掃描其中，發(fā)現(xiàn) html body div 等將會進(jìn)行上色處理，而指定?lang-java

將會更加 Java 的特性進(jìn)行對應(yīng)的上色處理。當(dāng)然其并不是必須的，你可以指定?lang-other 也可以不指定該樣式。

現(xiàn)在看看樣式咋樣;

還不錯吧？

當(dāng)然還可以自定義一定的樣式，具體可以修改 css 文件；這里不深入介紹。可以來個簡單的，比如邊框和背景改改：

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

Head 部分加入;

pre.prettyprint

{

border: 2px dashed #888;

background: #ddd;

}

Show：

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

到這里其實使用上已經(jīng)差不多了；不過還有一些其他的東西。

About：

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

這里使用的是?run_prettify ，其與?prettify 的區(qū)別在哪里？

簡單來說?run_prettify 就是可以自主觸發(fā)，在加載完成后自動完成渲染工作。假如使用?prettify JS 我們需要在頁面加載完成時調(diào)用如下方法：

window.onload = function ()

{

// Load Prettify

prettyPrint();

}

當(dāng)然?run_prettify 還會去它的代碼托管下載其他的一些 JS 來完成對應(yīng)的其他語言支持。

2.CDN 加速：

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

值得一說的是，如果有特殊語言 (lang-)支持的話，還需要包含對應(yīng)的 JS，比如 CSS：

3.最新的源代碼和使用的 css 與 JS 打包

絕對官方?jīng)]有修改過：

4.本次的源碼下載：

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

作者：qiujuer

網(wǎng)站：

轉(zhuǎn)載請注明出處：外鏈網(wǎng)址已屏蔽

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

總結(jié)

以上是生活随笔為你收集整理的如何配置html prettify,[HTML] Prettify 代码高亮使用总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。