如何使用Google-Code-Prettify 實現程式碼高亮功能
導語:如何使用Google-Code-Prettify 實現程式碼高亮功能,為了方便大家的練習,下面是小編給大家提供的使用方法,大家可以參考閱讀,更多詳情請關注應屆畢業生考試網。
的'使用方法:
1.引入 jQuery 檔案和 檔案
<script src=""></script>
<script src=""type="text/javascript"></script>
<link href="/" type="text/css" rel="stylesheet" />
2.呼叫 實現程式碼高亮
在 body 標籤上新增呼叫方法,如下:
<body onload="prettyPrint()">
</body>
將你需要高亮顯示的程式碼片斷放在 pre標記裡,如下:
<pre class="prettyprint">
@*你的程式碼片斷*@
</pre>
使用jQuery小技巧實現優化
上述方法可以實現程式碼的高亮,但每次手動為pre標籤新增"prettyprint"類,顯示有些麻煩。
使用下邊的程式碼片斷來解決這個問題並替換掉 body 的"onload"的事件,實現分離:
$(window)(function(){
$("pre")lass("prettyprint"); prettyPrint();
})
到這我們應該已經成功使用 實現了程式碼的高亮顯示,為了提高頁面載入速度,我們應該將引用的js檔案放置在底部