highlight.js 程式碼化妝師

highlight.js Version： 9.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 class="code-class-name">...</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.called 是 true 時就不會執行，因此只要設成 false 就可以了。

範例

hljs.initHighlighting.called = false;
hljs.initHighlighting();