- 相關推薦
如何使用Google-Code-Prettify 實現代碼高亮功能
導語:如何使用Google-Code-Prettify 實現代碼高亮功能,為了方便大家的練習,下面是小編給大家提供的使用方法,大家可以參考閱讀,更多詳情請關注應屆畢業生考試網。
prettify.js 的使用方法:
1.引入 jQuery 文件和 prettify.js 文件
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="prettify.js"type="text/javascript"></script>
<link href="/prettify.css" type="text/css" rel="stylesheet" />
2.調用 prettify.js 實現代碼高亮
在 body 標簽上添加調用方法,如下:
<body onload="prettyPrint()">
</body>
將你需要高亮顯示的代碼片斷放在 pre標記里,如下:
<pre class="prettyprint">
@*你的代碼片斷*@
</pre>
使用jQuery小技巧實現優化
上述方法可以實現代碼的高亮,但每次手動為pre標簽添加"prettyprint"類,顯示有些麻煩。
使用下邊的代碼片斷來解決這個問題并替換掉 body 的"onload"的事件,實現分離:
$(window).load(function(){
$("pre").addClass("prettyprint"); prettyPrint();
})
到這我們應該已經成功使用 prettify.js 實現了代碼的高亮顯示,為了提高頁面加載速度,我們應該將引用的js文件放置在底部
【如何使用Google-Code-Prettify 實現代碼高亮功能】相關文章:
使用python實現Linux異步epoll的代碼10-27
PHP中如何實現crontab代碼05-30
如何使用JS實現短信發送倒計時功能08-30
php使用ftp函數實現簡單上傳功能10-31
java如何實現后臺自動發郵件功能09-17
CSS如何實現中英文雙語菜單效果代碼06-01
如何使用PS實現皮膚美白07-07
如何使用JavaScript實現倒計時10-14
PHP如何使用curl實現數據抓取09-27
Java 隊列實現原理及簡單實現代碼09-13