代码块

通过代码块配置，您可以指定主题中代码块的扩展功能。由于 Hexo 的代码渲染并不完善，因此我们根据 Hexo 的全局配置文件 _config.xml 中的代码高亮属性进行了兼容优化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#------------------------------------------------------
# 代码块的增强配置
#------------------------------------------------------
code:
  # 代码高亮
  highlight:
    highlightcss:
      # 在链接中挑选样式填入
      # 主题样式: https://highlightjs.org/static/demo/
      style: "tokyo-night-dark"
    prismcss:
      # 在链接中挑选样式填入
      # 主题样式: https://prismjs.com/
      style: "prism"
  # 代码复制按钮
  copyBtn:
    # 是否开启复制代码的按钮
    enable: true

代码高亮样式

您可以通过 code.highlight.highlightcss.style 和 code.highlight.prismcss.style 指定代码渲染的样式。

1
2
3
4
5
6

code:
  highlight:
    highlightcss:
      style: "tokyo-night-dark"
    prismcss:
      style: "prism"

这两个参数都用于指定引入样式的 CSS 文件，您可以在对应代码高亮库的主页找到相关的样式名称。

• highlightjs
• prismjs

代码复制按钮

您可以通过 code.copybtn.enable 属性控制代码复制按钮的显示，默认情况下该功能启用，并位于代码块右上角。

1
2
3

code:
  copyBtn:
    enable: true

代码高亮库

您可以在 Hexo 根目录下的全局配置 _config.yml 中切换代码高亮库，其中 syntax_highlighter 接受的参数为 highlight.js 和 prismjs

1
2
3
4
5
6
7
8

# Hexo > 7.0
syntax_highlighter: highlight.js

# Hexo < 7.0
highlight:
  enable: true
prismjs:
  enable: false

如果您需要取消代码高亮样式，您可以将 syntax_highlighter 留空，或将 highlight.enable 和 prismjs.enable 均修改为 false。

行号显示

当您启用了其中一个代码高亮库时，Hexo 根目录下的全局配置 _config.yml 中的 highlight.line_number 和 prismjs.line_number 将会被使用，默认配置为 true，即显示代码行号。如果您需要将行号显示关闭，那么只需要将对应的代码高亮库的 line_number 设置为 false。

1
2
3
4

highlight:
  line_number: true
prismjs:
  line_number: true

因为 Hexo 通过 figure 和 table 的包裹代码块的方式实现了行号显示，并且默认配置开启。为了保证默认配置的兼容性，我们对部分样式进行了处理，虽然存在部分样式丢失，但是这不会影响代码块的阅读。

目前Hexo 代码兼容行号显示后的代码并不够准确，因此 hightlight.js 的高亮样式无法识别这些没有被标记的代码。

当然，如果您取消行号的显示，那么 hightlight.js 下的代码高亮都会是正常的，或着您可以直接切换到 prism.js 代码高亮库。