起因

Hexo 自带的代码高亮插件 highlight.js 和 prism.js 提供的代码高亮太弱了，我最常用的 bash/shell 高亮几乎可以忽略不计，并且 python 的高亮也不是特别好看。
Shiki（式，一个日语词汇，意为 “样式”） 是一款美观而强大的代码语法高亮器，它与 VS Code 的语法高亮引擎一样，基于 TextMate 的语法及主题。Shiki 能为几乎所有主流编程语言提供非常准确且快速的语法高亮。
在 Github 上搜索 hexo-shiki，可以搜索到 hexo-shiki-plugin 库，正是可以将 shiki 集成到 hexo 的插件。在我使用过程中，还有根据切换 light 和 dark 主题的时候顺带切换代码块主题的需求，因此需要在设置上进行一下调整，记录一下。

配置 Hexo-shiki-plugin 插件

1、安装插件

1
npm install hexo-shiki-plugin --save

2、配置插件

插件基本配置项请参照 GitHub - nova1751/hexo-shiki-plugin 设置。

支持双色主题的额外配置

1、在 source 目录下新建一个 css/custom.css ，添加以下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[data-theme="light"] {
    --hl-color: #90a4ae !important;
    --hl-bg: #f6f8fa !important;
    --hltools-bg: #e6ebf1 !important;
    --hltools-color: #90a4ae !important;
    --hlnumber-bg: #f6f8fa !important;
    --hlnumber-color: rgba(144, 164, 174, 0.5) !important;
    --hlscrollbar-bg: #dce4eb !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(246, 248, 250, 0.1), rgba(246, 248, 250, 0.9)) !important;
}

[data-theme="dark"] {
    --hl-color: #abb2bf !important;
    --hl-bg: #282c34 !important;
    --hltools-bg: #21252b !important;
    --hltools-color: #bbbbbc !important;
    --hlnumber-bg: #282c34 !important;
    --hlnumber-color: #495162 !important;
    --hlscrollbar-bg: #373c47 !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(40, 44, 52, 0.1), rgba(40, 44, 52, 0.9)) !important;
}

figure.shiki {
    background-color: var(--hl-bg) !important;
    color: var(--hl-color) !important;
}

2、设置 shiki 代码高亮主题为 material-theme-lighter，经测试，该主题在亮暗双色代码块中显示均良好。

1
2
shiki:
    theme: material-theme-lighter

3、将上述 css 加入到 butterfly 主题的自定义样式表中：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

效果

博客亮色主题效果

博客暗色主题效果

也可以通过点击本页右下角切换亮/暗来自行尝试。