前幾天我決定把待辦已久的程式碼上色功能加到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端執行,不耗費伺服器資源,而且幾乎不用改動原有程式碼,我覺得非常好用。以上的使用分享,希望對大家有點幫助!