掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
詳解Google Code Prettify代碼高亮Prettify.js庫(kù)使用及其應(yīng)用
2015-01-09 20:55
欄目：技術(shù)開(kāi)發(fā)
查看(46640)
不管是之前自己的技術(shù)博客還是現(xiàn)在的公司官網(wǎng)，作為一個(gè)互聯(lián)網(wǎng)從業(yè)者，經(jīng)常需要寫(xiě)一些博文，這也是我的習(xí)慣，而寫(xiě)技術(shù)文章很多時(shí)候需要在文章中插入代碼，如果以普通字符形式展示出來(lái)我覺(jué)得不能夠顯示出代碼的魅力。而通常大家都是利用代碼高亮的方式，讓代碼在文章中顯得更加具體化，就好像我們?cè)谟镁庉嬈饕粯?。就那WP來(lái)說(shuō)，大家都知道有一些代碼高亮的插件，當(dāng)然我也曾經(jīng)嘗試過(guò)幾個(gè)，但都不是特別滿意，再者大家都知道使用插件的效率相對(duì)而言是比較低的。
而今天就跟大家介紹一下托管在Google Code上的一款代碼高亮開(kāi)源js庫(kù)Prettify.js，實(shí)際上大家可以在網(wǎng)上搜索得到很多相關(guān)的內(nèi)容，但網(wǎng)
上大多都是國(guó)人你傳我我傳你，很多寫(xiě)文章的作者甚至都沒(méi)有去項(xiàng)目的主頁(yè)去看最原始的文檔。以下頁(yè)面是Google站點(diǎn)，大家訪問(wèn)請(qǐng)自備梯子
項(xiàng)目主頁(yè)：https://code.google.com/p/google-code-prettify/
源代碼下載頁(yè)面：https://code.google.com/p/google-code-prettify/downloads/list
項(xiàng)目WIKI：https://code.google.com/p/google-code-prettify/w/list
下載后得到一個(gè)壓縮的文件包，里面包含prettify.js和run_prettify.js、prettify.css以及將近30種編程語(yǔ)言專(zhuān)屬的js正則代碼文件，也正式因?yàn)檫@樣很多地方其實(shí)主要就用到了其中的部分。下面就分別來(lái)介紹它的應(yīng)用（保證比普通文章要詳細(xì)以及實(shí)用）。
1、最簡(jiǎn)單的使用
就如官方wiki中的一樣，首先我們來(lái)點(diǎn)簡(jiǎn)單的，其實(shí)這也是網(wǎng)上99%的文章所介紹的，當(dāng)然其中又有一半以上都沒(méi)有介紹全。首先當(dāng)然是下載項(xiàng)目的文件保存到到你自己的項(xiàng)目某個(gè)文件夾中。然后在頁(yè)面中寫(xiě)入以下代碼引用js和CSS（注意自己的路徑）。
<script type="text/javascript" src="prettify/prettify.js"></script> <!--很多文章中所忽略的調(diào)用CSS，那樣出來(lái)的效果不堪入目哦--> <link type="text/css" rel="stylesheet" href="prettify/prettify.css"/>
然后在body標(biāo)簽使用onload事件載入prettyPrint()方法<body onload=”prettyPrint()”>
這樣就可以使用Prettify.js帶給你代碼高亮的體驗(yàn)了，不過(guò)好像貌似官方的CSS我個(gè)人不是特別的喜歡，特別是字體它沒(méi)約束，而Chrome給點(diǎn)額默認(rèn)pre標(biāo)簽的字體為monospace，雖然還可以，但如果你的網(wǎng)站一旦指定了字體，比如微軟雅黑等，那代碼使用微軟雅黑就有點(diǎn)兒夠嗆的。包含字體原因，我提供一下覆蓋的部分CSS，其實(shí)你加到官方CSS文件最后就可以，當(dāng)然你為了追求性能與完美完全可以把官方對(duì)應(yīng)的代碼刪除。
.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo { color: #F8F8F2; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str,
.prettyprint .atv { color: #E6DB74; }
.prettyprint .kwd,
.prettyprint .tag { color: #F92659; }
.prettyprint .typ,
.prettyprint .atn,
.prettyprint .dec,
.prettyprint .var { color: #A6E22E; }
.prettyprint .pln { color: #66D9EF; }
當(dāng)然如果你要選擇跟我們一樣的，可以直接看我們的官網(wǎng)對(duì)應(yīng)的CSS，我們官網(wǎng)就是使用這個(gè)JS庫(kù)來(lái)實(shí)現(xiàn)代碼高亮的，比如你現(xiàn)在看到的就是最終的效果，而這就是基礎(chǔ)的應(yīng)用。
2、高級(jí)應(yīng)用
其實(shí)上面只是這個(gè)強(qiáng)大庫(kù)的最基礎(chǔ)的應(yīng)用，其實(shí)它還有更高級(jí)的應(yīng)用，當(dāng)然這里我也不可能完全講到（主要是英文有點(diǎn)爛，怕理解不夠透徹，然后誤導(dǎo)大家），愛(ài)折騰的朋友可以直接去項(xiàng)目的WIKI頁(yè)面查看更多內(nèi)容。
首先說(shuō)一個(gè)最基本的應(yīng)用，就是在前面顯示行號(hào)，這個(gè)其實(shí)就是在pre標(biāo)簽的class選擇器中加入linenums就可以了，就會(huì)得到如下風(fēng)格：
/*這里演示添加選擇器linenums來(lái)顯示行號(hào)*/
.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
其次再說(shuō)下，其實(shí)我們可以不再body里面寫(xiě)onload事件，也就是讓代碼自動(dòng)加載，這時(shí)候我們只需要把prettify.js換成run_prettify.js即可，但是需要說(shuō)明的是run_prettify.js文件中有引用Google源的內(nèi)容，而國(guó)內(nèi)屏蔽了谷歌的訪問(wèn)，因此如果要使用這種方式請(qǐng)把這個(gè)庫(kù)文件解壓后找出其中引用谷歌源的文件下載到本地然后再引用，否則打開(kāi)特別慢甚至打不開(kāi)。
此外，當(dāng)我們使用這種方式的時(shí)候，在wiki中有autoload、lang、skin、callback四種參數(shù)供我們使用，具體使用技巧請(qǐng)?jiān)L問(wèn)項(xiàng)目wiki頁(yè)面參考。除此之外還有更多說(shuō)明哦，這里就不多說(shuō)，直接看wiki哦。
3、相關(guān)延伸
其實(shí)說(shuō)到這里，大家可能會(huì)覺(jué)得，特別是小白，這樣插入也挺麻煩的，每次都要插入<pre class=”prettyprint “>和</pre”>，但實(shí)際上我們可以進(jìn)一步改裝，比如我們可以把這些東西寫(xiě)入我們網(wǎng)站的編輯器中。就算我們不寫(xiě)入編輯器中，我們讓代碼更簡(jiǎn)單。
比如每次需要插入代碼的時(shí)候，我們只需要插入<pre>和</pre>就可以，同時(shí)也可以把body的解放出來(lái)。比如這里我演示一下用jQuery來(lái)簡(jiǎn)單的改裝一下。
$(window).load(function(){
$("pre").addClass("prettyprint");//如果其他地方也要用到pre，我們可以再加一個(gè)父標(biāo)簽的選擇器來(lái)區(qū)分
prettyPrint();//代替body上的onload事件加載該方法
})
當(dāng)然不要忘記引用jQuery庫(kù)了，實(shí)際上現(xiàn)在很多網(wǎng)站都應(yīng)用到了jQuery，這樣就不成問(wèn)題了，當(dāng)然如果你的網(wǎng)站不使用jQuery，那么你也可以用原生JS來(lái)處理。
本來(lái)可以寫(xiě)更詳細(xì)的，但很晚了，先睡覺(jué)了哦~~
轉(zhuǎn)載請(qǐng)注明出處：詳解Google Code Prettify代碼高亮Prettify.js庫(kù)使用及其應(yīng)用 - 微構(gòu)網(wǎng)絡(luò)
- 關(guān)于微構(gòu)
- 關(guān)于我們
- 團(tuán)隊(duì)動(dòng)態(tài)
- 行業(yè)資訊
- 實(shí)用知識(shí)
- 常見(jiàn)問(wèn)題
- 服務(wù)項(xiàng)目
- 網(wǎng)站定制開(kāi)發(fā)
- 移動(dòng)端/APP開(kāi)發(fā)
- 微信/小程序開(kāi)發(fā)
- 技術(shù)支持服務(wù)
- 營(yíng)銷(xiāo)推廣
- 主機(jī)域名
- 聯(lián)系我們
- 電話：15574303608
- 郵箱：server@csweigou.com
- 地址：長(zhǎng)沙市五一西路錦繡中環(huán)1116(五一廣場(chǎng)平和堂對(duì)面)
- 大項(xiàng)目團(tuán)隊(duì)：長(zhǎng)沙市芙蓉區(qū)五一大道曉園大廈17樓B座
移動(dòng)版官網(wǎng)
尋找項(xiàng)目經(jīng)理
- 在線咨詢
- 15574303608
-
項(xiàng)目經(jīng)理微信
-
移動(dòng)版官網(wǎng)