Zi 字媒體

highlight.js 程式碼化妝師 highlight.js Version： 9.12.0 有時候在開發一些類 IDE 或者顯示程式碼功能的時候，總會希望放在裡面的內容可以像真的 IDE 一樣幫我們自動上色。 highlight.js 就是為了這種需求而誕生，它支援 176 種語言及 79 種 styles (9.12版)，想得到的語言基本上都支援了。 How to use Require and Init hljs.initHighlightingOnLoad(); 在 highlight.js 中，預設會去處理 HTML 中 ... 的結構。(Class name 可以在 官網文件 查詢) 範例： 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 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: