Code Prettify
現存的 code block 直接套用,無須任何修改
樣式還算順眼但無法做任何調整,也沒有 dark mode
有效能問題,code block 會有明顯上色動作
Syntax-highlighting Code Block
code block 可直接套用,但是顏色比 Code Prettify 醜
沒有 Code Prettify 的效能問題
Prismatic
包含兩種方式:
1. prism.js
2. highlight.js
因為 prism.js 需要有 language class
所以需使用 Prismatic Block
後台可以調整主題樣式
但某些設定不知為什麼卻沒有出現
例如我啟用顯示行數卻如下
如果使用 highlight.js 則可以套用原有的 code block
但會有外框問題(js 的 bug)
Code Syntax Block
需使用外掛的 block
有移除後的問題
Highlighting Code Block
後台有滿多設定可以調整
顯示如下
需使用外掛獨有的 code block
相對地,如果移除外掛
原本 HCB 的區塊便會出問題
保留 HTML 程式碼則會變得跟原本不一樣
CodeMirror Blocks
需使用外掛的 code block
可以指定語言及主題
後台還有更多設定可以調整
功能更為強大,可以執行程式碼
同樣有外掛移除後的問題
結論
可以分為兩大類:
一、直接替 <pre><code>
區塊套用樣式
優點是不用做額外調整,適合懶人
缺點是只有顏色,沒有其他功能
二、使用外掛新增的區塊
優點是功能豐富,有複製、執行、行數等
缺點是如果外掛有變動就要調整所有文章區塊,工程浩大
期望是第一種的方式
但現有的外掛顏色都不好看
因此我選擇手動修改佈景主題