快捷導(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ù)，用戶(hù)可以從官網(wǎng)獲取：

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

highlight.js庫(kù)支持在線(xiàn)定制，按照默認(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ǔ)言類(lèi)別，上面代碼中指定為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ù)覽效果如下圖：