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