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()'>
將需要著色的代碼寫入以下形式的<pre></pre>標(biāo)簽之中：
<pre class=”prettyprint”>
/*source code*/
今天這篇文章主要講述使用 google-code-prettify 來實(shí)現(xiàn)代碼的高亮顯示，以前我使用 highlight.js 來實(shí)現(xiàn)文章中代碼的高亮顯示。 prettify 非常小巧且配置簡(jiǎn)單，使用它來實(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"類，顯示有些麻煩。使用下邊的代碼片斷來解決這個(gè)問題并替換掉 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)文章
LayUI數(shù)據(jù)接口返回實(shí)體封裝的例子
今天小編就為大家分享一篇LayUI數(shù)據(jù)接口返回實(shí)體封裝的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
可折疊的樹形菜單想必大家并不陌生吧，實(shí)現(xiàn)方法有多種，在本文將為大家介紹下js是如何實(shí)現(xiàn)的，希望對(duì)大家有所幫助2013-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序制作表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要給大家介紹了關(guān)于Three.js中矩陣和向量使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
多種方式實(shí)現(xiàn)JS調(diào)用后臺(tái)方法進(jìn)行數(shù)據(jù)交互
幾種典型常用的方法如利用控件的AutopostBack屬性、Button提交表單等等，下面為大家分享下JS調(diào)用后臺(tái)方法進(jìn)行數(shù)據(jù)交互示例2013-08-08
切換面板具備功能：鼠標(biāo)劃過不同的題目會(huì)有不同的圖片和解說，可以連接到不同的網(wǎng)站，實(shí)例代碼如下，感興趣的朋友可以參考下哈2013-06-06
JavaScript筆記之?dāng)?shù)據(jù)屬性和存儲(chǔ)器屬性
本文給大家介紹js數(shù)據(jù)屬性和存儲(chǔ)器屬性，及兩種屬性的區(qū)別，對(duì)js數(shù)據(jù)屬性存儲(chǔ)器屬性相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要介紹了p5.js入門教程之鍵盤交互,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面方法實(shí)例代碼
微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面方法的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了javascript里使用php代碼的方法,以實(shí)例形式展示了javascript與php代碼混編的應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12