本文實(shí)例講述了JavaScript語法高亮庫highlight.js用法。分享給大家供大家參考，具體如下：
highlight.js是一款基于JavaScript的語法高亮庫，目前支持125種編程語言，有63種可供選擇的樣式，而且能夠做到語言自動識別，和目前主流的JS框架都能兼容，可以混合使用。
這款高亮庫可以用在博客系統(tǒng)中，其使用方法及其簡單，幾乎不需要任何學(xué)習(xí)成本，下面介紹highlight.js的使用。
1.獲取highlight.js庫，用戶可以從官網(wǎng)獲取：
地址：https://highlightjs.org/download/
highlight.js庫支持在線定制，按照默認(rèn)的選擇點(diǎn)擊Download即可：
或者點(diǎn)擊此處本站下載。
2.下載后解壓，文件結(jié)構(gòu)如下：
styles目錄下為所有css樣式，highlight.pack.js為庫文件。
3.在html頁面中引入default.css和highlight.pack.js，代碼如下：
<link rel="stylesheet" href="highlight/styles/default.css"><script src="highlight/highlight.pack.js"></script>
4.加載highlight.js庫，代碼如下：
<script> hljs.initHighlightingOnLoad();</script>
5.在<pre>和<code>標(biāo)簽中添加要高亮顯示的代碼：
<pre><code class="php"><?php//使用substr_replace函數(shù)進(jìn)行字符串插入操作demo$str="歡迎來到武林網(wǎng)";echo substr_replace($str,"/"PHP大神/"",4,0);//輸出：歡迎"PHP大神"來到武林網(wǎng)?></code></pre>
class屬性指定語言類別，上面代碼中指定為php語言。
完整代碼如下所示：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>HighLightjs</title> <link rel="stylesheet" href="highlight/styles/default.css"> <script src="highlight/highlight.pack.js"></script><body><script> hljs.initHighlightingOnLoad();</script><pre><code class="php"><?php//使用substr_replace函數(shù)進(jìn)行字符串插入操作demo$str="歡迎來到武林網(wǎng)";echo substr_replace($str,"/"PHP大神/"",4,0);//輸出：歡迎"PHP大神"來到武林網(wǎng)?></code></pre></body></html>
預(yù)覽效果如下圖：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
