Facebook加入
LINE加入
2021/12/25
highlight.js 程式碼化妝師
highlight.js Version：
9.12.0
有時候在開發一些類 IDE 或者顯示程式碼功能的時候，總會希望放在裡面的內容可以像真的 IDE 一樣幫我們自動上色。
highlight.js 就是為了這種需求而誕生，它支援 176 種語言及 79 種 styles (9.12版)，想得到的語言基本上都支援了。
How to use
Require and Init
在 highlight.js 中，預設會去處理 HTML 中 ...
範例：
class test {
}
$arr = [1, 2, 3];
foreach ($arr as $value) {
echo $value . PHP_EOL;
}
CDN 上面的 highlight.js 預設沒有全部語言，如果發現你想要的語言沒有顏色的話，可以再自行引入。
如果架構上與預設 HTML 結構不符的話，可以直接使用 highlightBlock method 針對想要的部份套用。
範例：
...// 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();Categories: JavaScript
Tags: javascript
熱門推薦
留言回覆
