從 highlight.js 到 shiki

過去很長一段時間裡面，要講到在網頁上面標亮程式碼語法，一般無非就是 highlight.js 和 prism.js 兩大選項，但是到了最近我才知道還有一個比較新（雖說如此，其實也已經有幾年了）且更先進的 shiki 存在。跟前兩者是利用較簡單的正規表達式來分析程式碼不同地，shiki 的核心用的是跟 VS Code 一樣的 TextMate 文法系統，然後再用編譯成 WebAssembly 的 Oniguruma 程式庫來進行處理，從而可以達到跟 VS Code 完全一樣的語法理解與標亮效果。不難猜到，VS Code 和 TypeScript 的網站本身用的標亮系統就是 shiki。

上面這張圖片中可以看到 highlight.js（左）跟 shiki（右）的標亮效果對照，可以看得出來 shiki 能夠把 token 分類得更仔細、並加上更多的顏色。因為效果真的很有差，我就決定把網站的標亮系統整個換成 shiki 了。底下是我大致的作法：

<script src="https://unpkg.com/shiki@0.14.5/dist/index.unpkg.iife.js"></script>
<script>
    const langs = ["js", "ts", "cs", "html"]; // 固定載入的常用語言清單
    shiki
        .getHighlighter({ theme: "dark-plus", langs })
        .then(highlighter =>
            jQuery("pre code").each(async (_, n) => {
                // 抓出區塊的語言
                const lang = [...n.classList]
                    .find(c => c.match(/^language-/))?.substring(9);
                // 如果遇到常用語言之外的語言，就額外載入
                if(lang && !langs.includes(lang)) {
                    await highlighter.loadLanguage(lang);
                }
                // 進行轉換
                const code = highlighter.codeToHtml(n.innerText, { lang });
                n.parentNode.outerHTML = code;
            })
        )
</script>

對於有在發表程式相關文章的朋友來說，shiki 真的是非常值得推薦喔！