Hexo Syntax Highlight (Prismjs)


  1. 說明
    1. highlight
    2. hexo-prism-plus
    3. hexo-prism-plugin
    4. Hexo 6
    5. prism-thmes

筆記更新 Hexo 為 6.0 版本的方式,同時比較各種 Hexo 達到 Code Syntax Highlight 的方式 😊

JavaScript logo

說明

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 熟悉程度有限,在嘗試一段時間後作罷。但過程裝發現了幾個有趣的收穫:

  1. prismjs 分為預處理以及即時處理的方式,將 code element 進行 tag 標註
  2. themes style file 則負責顏色內容,與 prismjs 的 js 相互合作
  3. 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 即可。

prism-themes | cdnjs