首頁 > 開發者 > JavaScript
本文執行個體講述了JavaScript文法高亮庫highlight.js用法。分享給大家供大家參考，具體如下：
highlight.js是一款基於JavaScript的文法高亮庫，目前支援125種程式設計語言，有63種可供選擇的樣式，而且能夠做到語言自動識別，和目前主流的JS架構都能相容，可以混合使用。
這款高亮庫可以用在部落格系統中，其使用方法及其簡單，幾乎不需要任何學習成本，下面介紹highlight.js的使用。
1.擷取highlight.js庫，使用者可以從官網擷取：
地址：https://highlightjs.org/download/
highlight.js庫支援線上定製，按照預設的選擇點擊Download即可：
或者點擊此處本站下載。
2.下載後解壓，檔案結構如下：
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>標籤中添加要高亮顯示的代碼：
<pre><code class="php"><?php//使用substr_replace函數進行字串插入操作demo$str="歡迎來到雲棲社區";echo substr_replace($str,"\"PHP大神\"",4,0);//輸出：歡迎"PHP大神"來到雲棲社區?></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函數進行字串插入操作demo$str="歡迎來到雲棲社區";echo substr_replace($str,"\"PHP大神\"",4,0);//輸出：歡迎"PHP大神"來到雲棲社區?></code></pre></body></html>
預覽效果如下圖：
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript資料結構與演算法技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
