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

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

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

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

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

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

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

地址：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">
&lt;?php
//使用substr_replace函數進行字符串插入操作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函數進行字符串插入操作demo
$str="歡迎來到腳本之家";
echo substr_replace($str,"\"PHP大神\"",4,0);
//輸出：歡迎"PHP大神"來到腳本之家
?&gt;
</code>
</pre>
</body>
</html>

預覽效果如下圖：