Hexo Stellar 和 Next 主题支持 KaTex 公式与 Markdown 复杂表格

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

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

Markdown-it

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

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

Hexo 中 Markdown-it 的安装与配置

先卸载 Hexo 默认引擎

1

npm un hexo-renderer-marked --save

安装 markdown-it 引擎

1

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

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

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

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 的官方效果演示 Demo

KaTex 公式插件安装与配置

KaTeX 是一款轻量化的公式渲染器，拥有比 MathJax 3 更快的效率。

在 markdown-it 中使用 Katex 的用法和配置如下：

安装 markdown-it-katex 插件

1

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

添加配置

在站点配置文件 _config.yml 中增加 markdown-it 的插件配置

1
2
3
4
5
6
7
8

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

用法与效果

1

$E = mc^{2}$

1

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

1
2
3
4
5
6
7
8
9
10
11

$${\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 原生只支持最简单的表格，不支持合并单元格表格，通过安装插件支持。

安装 markdown-it-multimd-table 插件

1

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

添加配置

在站点配置文件 _config.yml 中增加 markdown-it 的插件配置

1
2
3
4
5
6
7
8

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

用法与效果

1
2
3
4
5
6
7
8
9

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

*Italic*

- Item 1
- Item 2

```python
.1 + .2
```

.1 + .2

1
2
3
4
5
6
7
8
9
10

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]

1
2
3
4
5
6
7
8
9

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

可以设置文字颜色插件

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

安装 markdown-it-color-text 插件

1

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

添加插件配置

在站点配置文件 _config.yml 中增加 markdown-it 的插件配置

1
2
3
4
5
6
7
8
9
10
11
12

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

用法与效果

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

1
2

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

寻找插件的通用方法

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

如 markdown-it + table 搜索 markdown-it 的表格插件

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章