highlight.js 程式碼化妝師

highlight.js Version9.12.0

有時候在開發一些類 IDE 或者顯示程式碼功能的時候,總會希望放在裡面的內容可以像真的 IDE 一樣幫我們自動上色。
highlight.js 就是為了這種需求而誕生,它支援 176 種語言及 79 種 styles (9.12版),想得到的語言基本上都支援了。

How to use

Require and Init

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

<!-- init highlight.js -->
<script>hljs.initHighlightingOnLoad();</script>

在 highlight.js 中,預設會去處理 HTML 中 <pre><code>...</code></pre> 的結構。(Class name 可以在 官網文件 查詢)
範例:

<pre><code class="php">
class test {

}

arr = [1, 2, 3]; foreach (arr as value) {     echo value . PHP_EOL;
} 
</code></pre>

CDN 上面的 highlight.js 預設沒有全部語言,如果發現你想要的語言沒有顏色的話,可以再自行引入。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/excel.min.js"></script>

如果架構上與預設 HTML 結構不符的話,可以直接使用 highlightBlock method 針對想要的部份套用。
範例:

<div class="code php">...</div>
// Vanilla
let codeObj = document.getElementsByClassName('code');
Array.prototype.forEach.call(codeObj, function(block) {
    hljs.highlightBlock(block);
});

// jQuery
$('div.code').each(function(i, block) {
    hljs.highlightBlock(block);
});

動態更新

雖然上面的範例可以解決大部份的問題,可是當需要動態 highlight 時,就比較麻煩了,highlight.js 只有在第一次 init 時才會執行,之後再呼叫 initHighlighting 就不會有反應了。
根據原始碼的邏輯,當 initHighlighting.calledtrue 時就不會執行,因此只要設成 false 就可以了。

範例

hljs.initHighlighting.called = false;
hljs.initHighlighting();
Categories: JavaScript