2024国产成人精品免费视频|日本免费一区二区三区毛片|久久97超碰色中文字幕|亚洲天堂a中文字幕

詳解Google Code Prettify代碼高亮Prettify.js庫使用及其應用

2015-01-09 20:55 欄目：技術開發(fā) 查看(47428)

不管是之前自己的技術博客還是現(xiàn)在的公司官網，作為一個互聯(lián)網從業(yè)者，經常需要寫一些博文，這也是我的習慣，而寫技術文章很多時候需要在文章中插入代碼，如果以普通字符形式展示出來我覺得不能夠顯示出代碼的魅力。而通常大家都是利用代碼高亮的方式，讓代碼在文章中顯得更加具體化，就好像我們在用編輯器一樣。就那WP來說，大家都知道有一些代碼高亮的插件，當然我也曾經嘗試過幾個，但都不是特別滿意，再者大家都知道使用插件的效率相對而言是比較低的。

而今天就跟大家介紹一下托管在Google Code上的一款代碼高亮開源js庫Prettify.js，實際上大家可以在網上搜索得到很多相關的內容，但網

上大多都是國人你傳我我傳你，很多寫文章的作者甚至都沒有去項目的主頁去看最原始的文檔。以下頁面是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正則代碼文件，也正式因為這樣很多地方其實主要就用到了其中的部分。下面就分別來介紹它的應用（保證比普通文章要詳細以及實用）。

1、最簡單的使用

就如官方wiki中的一樣，首先我們來點簡單的，其實這也是網上99%的文章所介紹的，當然其中又有一半以上都沒有介紹全。首先當然是下載項目的文件保存到到你自己的項目某個文件夾中。然后在頁面中寫入以下代碼引用js和CSS（注意自己的路徑）。

<script type="text/javascript" src="prettify/prettify.js"></script>
<!--很多文章中所忽略的調用CSS，那樣出來的效果不堪入目哦-->
<link  type="text/css" rel="stylesheet"  href="prettify/prettify.css"/>

然后在body標簽使用onload事件載入prettyPrint()方法<body onload=”prettyPrint()”>

這樣就可以使用Prettify.js帶給你代碼高亮的體驗了，不過好像貌似官方的CSS我個人不是特別的喜歡，特別是字體它沒約束，而Chrome給點額默認pre標簽的字體為monospace，雖然還可以，但如果你的網站一旦指定了字體，比如微軟雅黑等，那代碼使用微軟雅黑就有點兒夠嗆的。包含字體原因，我提供一下覆蓋的部分CSS，其實你加到官方CSS文件最后就可以，當然你為了追求性能與完美完全可以把官方對應的代碼刪除。

.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; }

當然如果你要選擇跟我們一樣的，可以直接看我們的官網對應的CSS，我們官網就是使用這個JS庫來實現(xiàn)代碼高亮的，比如你現(xiàn)在看到的就是最終的效果，而這就是基礎的應用。

2、高級應用

其實上面只是這個強大庫的最基礎的應用，其實它還有更高級的應用，當然這里我也不可能完全講到（主要是英文有點爛，怕理解不夠透徹，然后誤導大家），愛折騰的朋友可以直接去項目的WIKI頁面查看更多內容。

首先說一個最基本的應用，就是在前面顯示行號，這個其實就是在pre標簽的class選擇器中加入linenums就可以了，就會得到如下風格：

/*這里演示添加選擇器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源的內容，而國內屏蔽了谷歌的訪問，因此如果要使用這種方式請把這個庫文件解壓后找出其中引用谷歌源的文件下載到本地然后再引用，否則打開特別慢甚至打不開。

此外，當我們使用這種方式的時候，在wiki中有autoload、lang、skin、callback四種參數供我們使用，具體使用技巧請訪問項目wiki頁面參考。除此之外還有更多說明哦，這里就不多說，直接看wiki哦。

3、相關延伸

其實說到這里，大家可能會覺得，特別是小白，這樣插入也挺麻煩的，每次都要插入<pre class=”prettyprint “>和</pre”>，但實際上我們可以進一步改裝，比如我們可以把這些東西寫入我們網站的編輯器中。就算我們不寫入編輯器中，我們讓代碼更簡單。

比如每次需要插入代碼的時候，我們只需要插入<pre>和</pre>就可以，同時也可以把body的解放出來。比如這里我演示一下用jQuery來簡單的改裝一下。

$(window).load(function(){
  $("pre").addClass("prettyprint");//如果其他地方也要用到pre，我們可以再加一個父標簽的選擇器來區(qū)分
  prettyPrint();//代替body上的onload事件加載該方法
})

當然不要忘記引用jQuery庫了，實際上現(xiàn)在很多網站都應用到了jQuery，這樣就不成問題了，當然如果你的網站不使用jQuery，那么你也可以用原生JS來處理。

本來可以寫更詳細的，但很晚了，先睡覺了哦~~

與我們的項目經理聯(lián)系
掃二維碼與項目經理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網交流

轉載請注明出處：詳解Google Code Prettify代碼高亮Prettify.js庫使用及其應用 - 微構網絡
分享：
库尔勒市| 云浮市| 鄂尔多斯市| 大庆市| 巫溪县| 抚松县| 永川市| 泰和县| 时尚| 永年县| 崇阳县| 古交市| 仪陇县| 嵊泗县| 金昌市| 太康县| 博罗县| 安图县| 婺源县| 漳州市| 惠州市| 禄丰县| 昭觉县| 镇康县| 绵阳市| 江永县| 清河县| 勐海县| 九寨沟县| 札达县| 威海市| 新巴尔虎右旗| 自贡市| 昆山市| 望谟县| 定陶县| 江城| 夏津县| 红原县| 阜新| 山西省|