 
<link  rel="stylesheet" type="text/css"/> 

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>

將<body>改為：

復(fù)制代碼代碼如下:

將需要著色的代碼寫入以下形式的<pre></pre>標簽之中：

復(fù)制代碼代碼如下:

 
<pre class=”prettyprint”> 

/*source code*/

更多演示

今天這篇文章主要講述使用 google-code-prettify 來實現(xiàn)代碼的高亮顯示，以前我使用 highlight.js 來實現(xiàn)文章中代碼的高亮顯示。 prettify 非常小巧且配置簡單，使用它來實現(xià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 實現(xiàn)代碼高亮

在 body 標簽上添加調(diào)用方法，如下：

<body onload="prettyPrint()">
</body>
將你需要高亮顯示的代碼片斷放在<pre>標記里，如下：

<pre class="prettyprint">
  @*你的代碼片斷*@
</pre>

使用 jQuery 小技巧實現(xiàn)優(yōu)化

上述方法可以實現(xiàn)代碼的高亮，但每次手動為<pre>標簽添加"prettyprint"類，顯示有些麻煩。使用下邊的代碼片斷來解決這個問題并替換掉 body 的"onload"的事件，實現(xiàn)分離：

$(window).load(function(){
   $("pre").addClass("prettyprint");
   prettyPrint();
})

到這我們應(yīng)該已經(jīng)成功使用 prettify.js 實現(xiàn)了代碼的高亮顯示，為了提高頁面加載速度，我們應(yīng)該將引用的 js 文件放置在底部

相關(guān)文章

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