筆記更新 Hexo 為 6.0 版本的方式,同時比較各種 Hexo 達到 Code Syntax Highlight 的方式 😊
說明
highlight
在 Hexo 5 版本之前原生支援的 syntax highlight 技術,但因為對 themes 以及支援的程式語言不足而放棄。
hexo-prism-plus
在搜尋的過程中,有發現到 hexo-prism-plus。但嘗試了一會無法啟用成功,最後忍痛放棄。
hexo-prism-plugin
有很長一段時間使用 hexo-prism-plugin,其所支援的 okaidia 色彩主題很對喜歡 monokai 的胃口。同時 prism 所支援的程式語言更為豐富。
但在最近因為需要 vbscript 的 syntax highlight 支援,發現 prismjs 是可以辦到,但 hexo-prism-plugin 已經四年沒有維護,其使用的 prismjs 停留在過早的版本。
原本嘗試要自己 Fork hexo-prism-plugin,但因為對 Node.js 熟悉程度有限,在嘗試一段時間後作罷。但過程裝發現了幾個有趣的收穫:
- prismjs 分為預處理以及即時處理的方式,將 code element 進行 tag 標註
- themes style file 則負責顏色內容,與 prismjs 的 js 相互合作
- Node Packages.json 的來源不僅可以是 NPM,更可以是 git 甚至是本機檔案系統,讓 Fork Node_Modules 成為可能
最後的選擇是不要在折騰,直接將 Hexo 專案升級為 6.0
Hexo 6
Hexo 6 內建有 highlight 以及 prismjs 可以使用,兩者不能同時使用,首先在 _config.yml 進行調整:
highlight:
enable: false
line_number: false
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
而不同於 hexo-prism-plugin 可以直接在 config 設定 themes,Hexo 6 是在 Head.ejs 的部分直接引入 CSS CDN:
<head>
...
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism-okaidia.min.css"/>
</head>
prism-thmes
除了 prism 預設的 thmes 外,尚有 prism-thmes,有更多豐富的 themes 可以提供使用。同樣是使用 CDN 的方式引入到 head 即可。