Hexo博客NexT主题设置之KaTex公式与Markdown复杂表格

Hexo的NexT主题优化配置，主要的特性与功能包括：

• Markdown-it 渲染引擎以及插件配置
  • KaTex公式设置
  • 复杂的Markdown表格
  • Markdown设置文字颜色
  • 复选框、emoji表情、键盘按键
  • 寻找插件的通用方法

前序文章：
Hexo博客NexT主题设置之使用HarmonyOS字体

版本信息

本文基于的环境与版本信息如下，版本不同可能会导致本文的配置达不到预期效果。

• Hexo：6.2.0
• hexo-theme-next：8.11.1

在进行优化配置前，请先阅读NexT主题的官方配置手册。
一般来说，稳妥起见，有自定义需求也建议先在官方手册中查找方法。

Markdown-it 渲染引擎以及插件配置

Hexo需要使用Markdown渲染引擎将md文件渲染成html文件，Hexo默认使用hexo-renderer-marked，可以换成hexo-renderer-markdown-it。

hexo-renderer-markdown-it拥有更好的性能，而且可以通过插件扩展功能，如：上标、下标、引用注脚、emoji、KaTex公式、多维表格等等。

安装

先卸载Hexo默认引擎

npm un hexo-renderer-marked --save

安装markdown-it引擎

npm i hexo-renderer-markdown-it --save

在Hexo站点配置文件_config.yml中增加以下配置，配置信息含义见说明文档。

markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix: 'language-'
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - 'markdown-it-footnote'
    - 'markdown-it-ins'
    - 'markdown-it-mark'
    - 'markdown-it-sub'
    - 'markdown-it-sup'

上面plugins下面的五个插件，是自带的五个插件，实现效果为：

• markdown-it-footnote
• markdown-it-ins
• markdown-it-mark
• markdown-it-sub
• markdown-it-sup

参考文献注脚

• 用法：引用内容[^1]
[^1]: 参考文献1

• 效果：引用内容^[1]

---

1. 参考文献1 ↩︎

下划线

• 用法：++Text++

• 效果：Text

标记

• 用法：==Text==

• 效果：Text

下标

• 用法：H~2~O

• 效果：H₂O

上标

• 用法：X^2^

• 效果：X²

markdown-it还支持特殊格式字符
用法：(c) (C) (r) (R) (tm) (TM) (p) (P) +-
效果：© © ® ® ™ ™ § § ±

其他用法，可以参考markdown-it官方Demo

KaTex公式

在NexT的数学公式设置方法介绍中，提到KeTaX拥有比MathJax 3更快的效率。实际上KaTeX确实也是一款轻量化的公式渲染器。

NexT中如何使用KaTeX在主题的官方说明文档中已经说的很详细了，这里补充一下在markdown-it里面的用法和配置

1. 安装markdown-it-katex插件

npm i @traptitech/markdown-it-katex --save

2. 在Hexo站点配置文件_config.yml中添加markdown-it插件配置

- plugin:
    name: '@traptitech/markdown-it-katex'
    options: # see https://katex.org/docs/options.html
      blockClass: "math-block"
      strict: false
      throwOnError: false
      errorColor: "#cc0000"

3. 用法与效果

• Inline Style
• Block Style

• 用法：inline效果 $E = mc^{2}$， inline带颜色效果 ${\color{Green}{\underline{P\{a<X\le b\}}}}$

• 效果：inline效果 $E = mc^{2}$， inline带颜色效果 ${\color{Green}{\underline{P\{a<X\le b\}}}}$

• 用法：

  $${\color{Green}{\underline{P\{a<X\le b\}}}}$$

  $$\begin{equation}
  \begin{aligned}
  a &= b + c \\
  &= d + e + f + g\\
  &= h + i
  \end{aligned}
  \end{equation}$$

• 效果：

$${\color{Green}{\underline{P\{a<X\le b\}}}}$$

$$\begin{equation} \begin{aligned} a &= b + c \\ &= d + e + f + g\\ &= h + i \end{aligned} \end{equation}$$

复杂的Markdown表格

Markdown原生只支持最简单的表格，不支持复杂表格，通过安装插件支持。

1. 安装markdown-it-multimd-table插件

npm i markdown-it-multimd-table --save

2. 在Hexo站点配置文件_config.yml中添加markdown-it插件配置

- plugin:
    name: markdown-it-multimd-table
    enable: true
    options:
      multiline: true
      rowspan: true
      headerless: true

3. 用法与效果

• Multiline 用法
• Multiline 效果

|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |

Markdown	Rendered HTML
*Italic*	Italic
- Item 1 - Item 2	Item 1 Item 2
```python .1 + .2 ```	.1 + .2

• Rowspan 用法
• Rowspan 效果

Stage | Direct Products | ATP Yields
----: | --------------: | ---------:
Glycolysis | 2 ATP ||
^^ | 2 NADH | 3--5 ATP |
Pyruvaye oxidation | 2 NADH | 5 ATP |
Citric acid cycle | 2 ATP ||
^^ | 6 NADH | 15 ATP |
^^ | 2 FADH2 | 3 ATP |
**30--32** ATP |||
[Net ATP yields per hexose]

Net ATP yields per hexose

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH2	3 ATP
30–32 ATP

• Headerless 用法
• Headerless 效果

|--|--|--|--|--|--|--|--|
|♜|  |♝|♛|♚|♝|♞|♜|
|  |♟|♟|♟|  |♟|♟|♟|
|♟|  |♞|  |  |  |  |  |
|  |♗|  |  |♟|  |  |  |
|  |  |  |  |♙|  |  |  |
|  |  |  |  |  |♘|  |  |
|♙|♙|♙|♙|  |♙|♙|♙|
|♖|♘|♗|♕|♔|  |  |♖|

♜		♝	♛	♚	♝	♞	♜
	♟	♟	♟		♟	♟	♟
♟		♞
	♗			♟
				♙
					♘
♙	♙	♙	♙		♙	♙	♙
♖	♘	♗	♕	♔			♖

设置文字颜色插件

Markdown原生不支持对文字设置颜色，通过安装插件支持。

1. 安装markdown-it-color-text插件

npm i markdown-it-color-text --save

2. 在Hexo站点配置文件_config.yml中添加markdown-it插件配置

- plugin:
    name: markdown-it-color-text
    options:
      classPrefix: 'md-colorify'
      inlineStyle: true
      customColor:
        primary: '#409EFF'
        success: '#67C23A'
        info: '#909399'
        warning: '#E6A23C'
        error: '#F56C6C'

3. 用法与效果

• primary
• success
• info
• warning
• error

• 用法：{primary}(primary Text)
• 效果：primary Text

• 用法：{success}(success Text)
• 效果：success Text

• 用法：{info}(info Text)
• 效果：info Text

• 用法：{warning}(warning Text)
• 效果：warning Text

• 用法：{error}(error Text)
• 效果：error Text

复选框、emoji表情、键盘按键

• markdown-it-checkbox
• markdown-it-emoji
• markdown-it-kbd

让markdown支持复选框表情

• 用法:

- [ ] 选中item 1
- [x] 未选中item 2

• 效果:
• 选中item 1
• 未选中item 2

让markdown支持emoji表情

• 用法：:)
• 效果：😃

让markdown支持按键格式

• 用法：[[ctrl]] [[+]] [[D]]
• 效果：ctrl + D

寻找插件的通用方法

在 https://www.npmjs.com 或 https://www.githu.com 以markdown-it + keyword为关键字搜索

如markdown-it + table搜索markdown-ittable插件