本文實(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)
疑難解答