Hexo Syntax Highlight (Prismjs)

2022-01-18

筆記更新 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

#Blog