Hexo5 程式碼區塊高亮 highlight 設定

開啟程式碼區塊複製功能

  1. 開啟 _config.next.yml,搜尋 codeblock
  2. copy_button 下的 enable 調整成 true → 開啟程式碼區塊複製功能,右上方會出現複製的 icon。
1
2
3
4
5
6
# _config.next.yml

codeblock:
# Add copy button on codeblock
copy_button:
enable: true

程式碼區塊複製 ▲

程式碼區塊樣式

  1. 開啟 _config.next.yml,搜尋 codeblock
  2. copy_button 下的 style 調整成 mac → 程式碼區域的風格。
1
2
3
4
5
6
7
8
# _config.next.yml

codeblock:
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: mac

codeblock 的預設風格 ▲

codeblock 的 mac 風格 ▲

程式碼區塊亮色或暗色主題設定

Hexo 內建支援 highlight.js 與 prismjs 兩種高亮庫。

  1. 開啟 NexT Highlight Theme Preview 文件,依照 Configuration 內選取喜歡的配置。

  2. 選取程式碼區塊中喜歡的 highlight engine,下方為 Hexo 預設 highlight.js,筆者套用此預設。

    1
    2
    3
    4
    5
    6
    7
    8
    # 路徑:_config.yml

    highlight:
    enable: true
    ...
    prismjs:
    enable: false
    ...
  3. 選擇區塊主題 : 文件中,Configuration 內的 Theme 下拉選單有很多主題供選擇,下方選取的為 night-owl 主題。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 路徑:_config.next.yml

    codeblock:
    # Code Highlight theme
    # All available themes: https://theme-next.js.org/highlight/
    theme:
    light: night-owl
    dark: night-owl
    ...
  4. 設定好後如有問題可使用 hexo clean 清除快取檔案,再執行 hexo s 重啟模擬伺服器。

參考資訊