2-0

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的過程中,我遇到以下兩個問題:

  1. Highlight.js雖然不大(約44KB未壓縮),但我仍希望只有當顯示含程式碼的文章時,才載入這個程式庫。
  2. 因為是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端執行,不耗費伺服器資源,而且幾乎不用改動原有程式碼,我覺得非常好用。以上的使用分享,希望對大家有點幫助!

0筆討論 回應文章