JavaScript語法高亮插件highlight.js用法詳解【附highlight.js本站下載】原創(chuàng)

原創(chuàng) 更新時間：2016年11月01日 11:25:03 原創(chuàng) 作者：Rongbo_J

這篇文章主要介紹了JavaScript語法高亮庫highlight.js用法,詳細分析了highlight.js的下載、調(diào)用及具體使用技巧,需要的朋友可以參考下

本文實例講述了JavaScript語法高亮庫highlight.js用法。分享給大家供大家參考，具體如下：

highlight.js是一款基于JavaScript的語法高亮庫，目前支持125種編程語言，有63種可供選擇的樣式，而且能夠做到語言自動識別，和目前主流的JS框架都能兼容，可以混合使用。

這款高亮庫可以用在博客系統(tǒng)中，其使用方法及其簡單，幾乎不需要任何學(xué)習成本，下面介紹highlight.js的使用。

1.獲取highlight.js庫，用戶可以從官網(wǎng)獲?。?/p>

地址：https://highlightjs.org/download/

highlight.js庫支持在線定制，按照默認的選擇點擊Download即可：

或者點擊此處本站下載。

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>標簽中添加要高亮顯示的代碼：

<pre>
<code class="php">
&lt;?php
//使用substr_replace函數(shù)進行字符串插入操作demo
$str="歡迎來到腳本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//輸出：歡迎"PHP大神"來到腳本之家
?&gt;
</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">
&lt;?php
//使用substr_replace函數(shù)進行字符串插入操作demo
$str="歡迎來到腳本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//輸出：歡迎"PHP大神"來到腳本之家
?&gt;
</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é)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

20個JS簡寫技巧提升工作效率
這篇文章主要介紹了20個JS簡寫技巧提升工作效率，本文特點以言簡意賅為主，圍繞JS簡寫技巧的話題展開全文，具有一定的查看價值，需要的小伙伴可以參考一下
2021-12-12
Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項中的formatter，將獲取到的數(shù)據(jù)轉(zhuǎn)換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項更新對應(yīng)單元格數(shù)據(jù)，最后通過getallselection方法獲取所選行數(shù)據(jù)
2017-07-07
uni-app實現(xiàn)熱更新的詳細操作步驟
隨著 App 成功上架,可能更新頻率往往會越來越高,傳統(tǒng)的應(yīng)用更新方式要求用戶重新下載并安裝應(yīng)用,這不僅耗費用戶大量時間、流量,還嚴重影響用戶體驗,為了提升用戶體驗,熱更新技術(shù)應(yīng)運而生,所以本文介紹了uni-app實現(xiàn)熱更新的詳細操作步驟,需要的朋友可以參考下
2025-04-04
js實現(xiàn)驗證碼干擾(動態(tài))
這篇文章主要為大家詳細介紹了js實現(xiàn)驗證碼干擾，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-02-02
js前端面試之同步與異步問題詳解
這篇文章主要給大家介紹了關(guān)于js前端面試之同步與異步問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用js具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧
2019-04-04
TypeScript條件類型與內(nèi)置條件類型超詳細講解
我們可以使用TypeScript中的條件類型來根據(jù)邏輯定義某些類型，就像是在編寫代碼那樣。它采用的語法和我們在JavaScript中熟悉的三元運算符很像：condition ? ifConditionTrue : ifConditionFalse。我們來看看他是怎么工作的
2023-03-03
有趣的JavaScript隱式類型轉(zhuǎn)換操作實例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2020-05-05
JS根據(jù)生日算年齡的方法
這篇文章主要介紹了JS根據(jù)生日算年齡的方法,涉及javascript操作時間的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
2015-05-05
巧用js提交表單輕松解決一個頁面有多個提交按鈕
使用js提交表單想必大家都會，如果要實現(xiàn)一個頁面有多個提交按鈕，你會嗎？下面有個不錯的示例，大家可以感受下
2013-11-11
AngularJs 禁止模板緩存的方法
本篇文章主要介紹了AngularJs 禁止模板緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11