Highlight.js：簡單好用的程式碼上色工具

前幾天我決定把待辦已久的程式碼上色功能加到Twincl程式園地裡──討論程式設計的網站怎麼可以沒有syntax highlighing呢？原本以為是個大工程（因為還要跟我們自行開發的WYSIWYG編輯器做整合），所以遲遲沒動工，沒想到只花了半天就搞定了，這都要歸功於簡單易用的Highlight.js工具。以下就和大家分享這個已有10年歷史的程式碼自動上色工具。

一、基本用法

最簡單的使用方法，就是把以下3行HTML加到你的網頁上：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

（這裡用的是GitHub Gist這組顏色的CSS，更多顏色請參考https://highlightjs.org/static/demo/）

hljs.initHighlightingOnLoad()會在網頁onload事件觸發時，將網頁中的程式碼區塊<pre><code>...</code></pre>找出來自動上色。這樣就完成了，簡單吧！

二、指定程式語言

Highlight.js支援166種程式語言，CDN上提供的highlight.min.js則支援最常用的22種，包括CSS/HTML、C++、C#、Java、JavaScript、PHP、Python、Ruby等等。我們可在程式碼區塊的class屬性中，指定要上色的程式語言是哪一種，例如：

<pre><code class="javascript">...</code></pre>

（以上的程式語言名稱可帶language-或lang-字首，例如language-javascript。這對用Markdown parser輸出的HTML很方便，因為CommonMark標準就是要求使用language-字首。）

若未指定程式語言，Highlight.js會試著自動判斷，通常效果就很好了。

三、我在整合中遇到的問題

Twincl網站的前端是用ReactJS開發的Single Page Application (SPA)，在整合Highlight.js的過程中，我遇到以下兩個問題：

Highlight.js雖然不大（約44KB未壓縮），但我仍希望只有當顯示含程式碼的文章時，才載入這個程式庫。
因為是SPA網站，Highlight.js只載入一次，但上色動作可能會進行多次，可是hljs.initHighlighting()呼叫第二次就沒作用了。

第一個問題比較簡單，用類似以下這段程式碼，即可動態載入Highlight.js：

if (!window.hljs) {
  var script = document.createElement('script');
  script.onload = () => window.hljs.initHighlighting();
  script.src = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js';
  document.body.appendChild(script);
}

第二個問題其實也不難，只是有點hack。我們先觀察Highlight.js原始碼，發現initHighlighting()執行時會先檢查initHighlighting.called是否為true，若是的話則不上色直接返回。所以我們只要在呼叫initHighlighting()之前，先手動把initHighlighting.called設為false即可。

結語

Highlight.js可以在純client端執行，不耗費伺服器資源，而且幾乎不用改動原有程式碼，我覺得非常好用。以上的使用分享，希望對大家有點幫助！