語法高亮度 highlight.js 使用教學

highlight.js 作為網頁語法高亮度顯示, highlight.js 為基於 BSD 的開放原始碼軟體,有如下兩種利用方式

  1. 安裝到自己的網站
  2. 從程式碼分享網站外連到自己的網站

第一種方式就是下載原始碼,然後把原始碼安裝到自己的網站,下載網址如下

依網頁指示勾選自己需要的語言項目,然後到底下點擊 Download ,就可以下載原始碼了,接著在網頁中使用以下的 HTML 標籤,分別是一個 <link> 及兩個 <script>

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

以上 <link> 是連結到 CSS 檔案,其中 /path/to/styles/ 為網站中存取 CSS 檔案的路徑,而第一個 <script> 則是連結到 JavaScript 檔案,同樣 /path/to/ 為網站中存取 JavaScript 程式的路徑,至於第二個 <script> 為 JavaScript 程式碼,用途為在網頁於用戶端瀏覽器載入後,啟動語法高亮度的 JavaScript 程式。

第二種方式也就是把原始碼上傳到程式碼分享網站,然後外連到自己的網站, highlight.js 官網的下載網頁提供了兩個 CDNs 的外連連結,其中之一如下網址

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

highlight.js 截至 9.12.0 版支援 172 種語言及 79 種樣式,以上分享網站僅支援 23 種常見語言,所以要外連還是自己內建,就看自己建站的需求了。

然後在網頁內顯示程式碼的語法高亮度要用 <pre><code> 把程式碼包起來,並利用 <code>class 屬性指定語言,例如以下為 C 的 Hello C! 程式

#include <stdio.h>

int main()
{
    printf("Hello C!\n");
    return 0;
}

注意左角括號或稱小於符號 < 要用 &lt; 代替,右角括號或稱大於符號 > 要用 &gt; 代替,因此以上完整的 HTML 碼為

<pre>
<code class="c">#include &lt;stdio.h&gt;

int main()
{
    printf("Hello C!\n");
    return 0;
}</code></pre>

之所以要做替換是因為瀏覽器預設把角括號當 HTML 的標籤,所以如果沒有做替換的話,很可能在瀏覽器解譯的時候會出錯。

更多用法的細節,請參考 highlight.js 官網的說明

更多支援語言及樣式,請參考 highlight.js 官網的 Demo

回程式語言教材首頁