快捷導(dǎo)航

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

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

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

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

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

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

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

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

highlight.js庫(kù)支持在線定制，按照默認(rèn)的選擇點(diǎn)擊Download即可：

或者點(diǎn)擊此處本站下載。

2.下載后解壓，文件結(jié)構(gòu)如下：

styles目錄下為所有css樣式，highlight.pack.js為庫(kù)文件。

3.在html頁(yè)面中引入default.css和highlight.pack.js，代碼如下：

<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>

4.加載highlight.js庫(kù)，代碼如下：

<script>
 hljs.initHighlightingOnLoad();
</script>

5.在<pre>和<code>標(biāo)簽中添加要高亮顯示的代碼：

<pre>
<code class="php">
&lt;?php
//使用substr_replace函數(shù)進(jìn)行字符串插入操作demo
$str="歡迎來(lái)到腳本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//輸出：歡迎"PHP大神"來(lái)到腳本之家
?&gt;
</code>
</pre>

class屬性指定語(yǔ)言類別，上面代碼中指定為php語(yǔ)言。

完整代碼如下所示：

<!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ù)進(jìn)行字符串插入操作demo
$str="歡迎來(lái)到腳本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//輸出：歡迎"PHP大神"來(lái)到腳本之家
?&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動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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