prettify 代碼高亮著色器google出品
在<head></head>標(biāo)簽之間加入這兩行代碼：
<link rel="stylesheet" type="text/css"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>
將<body>改為：
<body onload='prettyPrint()'>
將需要著色的代碼寫(xiě)入以下形式的<pre></pre>標(biāo)簽之中：
<pre class=”prettyprint”>
/*source code*/
今天這篇文章主要講述使用 google-code-prettify 來(lái)實(shí)現(xiàn)代碼的高亮顯示，以前我使用 highlight.js 來(lái)實(shí)現(xiàn)文章中代碼的高亮顯示。 prettify 非常小巧且配置簡(jiǎn)單，使用它來(lái)實(shí)現(xiàn)代碼的高亮顯示是個(gè)不錯(cuò)的選擇。下邊我們簡(jiǎn)單看看 prettify.js 的使用方法：
1.引入 jQuery 文件和 prettify.js 文件
<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script> <scriptsrc="prettify.js"type="text/javascript"></script>
2.調(diào)用 prettify.js 實(shí)現(xiàn)代碼高亮
在 body 標(biāo)簽上添加調(diào)用方法，如下：
<body onload="prettyPrint()">
</body>
將你需要高亮顯示的代碼片斷放在<pre>標(biāo)記里，如下：
<pre class="prettyprint"> @*你的代碼片斷*@ </pre>
使用 jQuery 小技巧實(shí)現(xiàn)優(yōu)化
上述方法可以實(shí)現(xiàn)代碼的高亮，但每次手動(dòng)為<pre>標(biāo)簽添加"prettyprint"類，顯示有些麻煩。使用下邊的代碼片斷來(lái)解決這個(gè)問(wèn)題并替換掉 body 的"onload"的事件，實(shí)現(xiàn)分離：
$(window).load(function(){
$("pre").addClass("prettyprint");
prettyPrint();
})
到這我們應(yīng)該已經(jīng)成功使用 prettify.js 實(shí)現(xiàn)了代碼的高亮顯示，為了提高頁(yè)面加載速度，我們應(yīng)該將引用的 js 文件放置在底部
相關(guān)文章
微信小程序 拍照或從相冊(cè)選取圖片上傳代碼實(shí)例
這篇文章主要介紹了微信小程序 拍照或從相冊(cè)選取圖片上傳代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
關(guān)于javascript document.createDocumentFragment()
documentFragment 是一個(gè)無(wú)父對(duì)象的document對(duì)象.2009-04-04
javascript實(shí)現(xiàn)支持移動(dòng)設(shè)備畫(huà)廊
本文通過(guò)純javascript技術(shù)實(shí)現(xiàn)支持移動(dòng)設(shè)備畫(huà)廊，支持移動(dòng)設(shè)備手勢(shì)操作，感興趣的朋友一起來(lái)學(xué)習(xí)吧2015-08-08
Handtrack.js庫(kù)實(shí)現(xiàn)實(shí)時(shí)監(jiān)測(cè)手部運(yùn)動(dòng)(推薦)
這篇文章主要介紹了實(shí)時(shí)監(jiān)測(cè)手部運(yùn)動(dòng)的 JS 庫(kù)，可以實(shí)現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
JavaScript控制網(wǎng)頁(yè)層收起和展開(kāi)效果的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁(yè)層收起和展開(kāi)效果的方法,涉及javascript操作網(wǎng)頁(yè)元素動(dòng)態(tài)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
20行JS代碼實(shí)現(xiàn)粘貼板復(fù)制功能
本文給大家分析20行JS代碼實(shí)現(xiàn)粘貼板功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
JavaScript隨機(jī)排序，自動(dòng)抽取中文與英文字母，重新組合并隨機(jī)排序，生成隨機(jī)數(shù)很可以。2010-09-09
使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能
這篇文章主要介紹了使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能,Vue/Rect?生態(tài)用多了都快忘記原生js怎么寫(xiě)了,今天需要直接在服務(wù)器裸寫(xiě)個(gè)頁(yè)面,實(shí)現(xiàn)?textarea?文本框里接收拖拽多個(gè)圖片,需要的朋友可以參考下2024-04-04
javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能代碼
這篇文章主要介紹了javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能,相信大家可以用的到2013-11-11
在前兩篇文章中，介紹了構(gòu)造繼承和原型繼承。今天把剩下的兩種寫(xiě)完，這兩種的應(yīng)用相對(duì)于前兩種來(lái)說(shuō)應(yīng)用很少，因此我把他們稱為是非主流繼承方式2014-05-05