发布于 

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

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

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

本文的方法主要是基于 Hexo 插件,与主题没有强关联,理论上适用于任何 Hexo 主题。
例如 Next 主题的设置方式与本文大同小异,具体可以参考 Hexo 博客 NexT 主题设置之 KaTex 公式与 Markdown 复杂表格

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'
配置中的 typographer: true 的作用是显示特殊格式字符
  • 写法:
    (c) (C) (r) (R) (tm) (TM) (p) (P) +-

  • 效果:
    © © ® ® ™ ™ § § ±

上面配置中,plugins 下面的五个插件,是自带的五个插件,下发与实现效果如下:

参考文献注脚

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

  • 效果:
    引用内容 [1]


  1. 参考文献 1 ↩︎

下划线

  • 写法:++Text++

  • 效果:Text

标记

  • 写法:==Text==

  • 效果:Text

下标

  • 写法:H~2~O

  • 效果:H2O

上标

  • 写法:X^2^

  • 效果:X2

Stellar 主题提供了原生的下划线、标记、上标、下标等标签插件,可以满足使用需求,但是如果你经常更换主题,那么可以使用 markdown-it 的插件的实现方式,免去了更换主题后修改标签的写法的工作量

其他用法,可以参考 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"

用法与效果

写法
inline 格式
1
$E = mc^{2}$
inline 带颜色格式
1
${\color{Green}{\underline{P\{a<X\le b\}}}}$
效果
inline 格式

inline 格式的效果: E=mc2E = mc^{2} ,可以与文字显示在同一行。

inline 带颜色格式

inline 带颜色格式的效果: P{a<Xb}{\color{Green}{\underline{P\{a<X\le b\}}}} ,可以与文字显示在同一行,同时还可以设置颜色。

写法
Block Style
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}
$$
效果

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

a=b+c=d+e+f+g=h+i\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 \
| ``` | ``` |
Markdown Rendered HTML
*Italic*

Italic

- Item 1
- Item 2
  • 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]
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
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'

用法与效果

  • 用法:{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 支持复选框

  • 安装插件:

    npm i markdown-it-checkbox --save

  • 增加配置:
    站点配置文件 _config.yml 中 markdown-it 的 plugins 下面增加 - markdown-it-checkbox

  • 用法:

1
2
[ ] 选中item 1
[x] 未选中item 2
  • 效果:


让 markdown 支持 emoji 表情

  • 安装插件:

    npm i markdown-it-emoji --save

  • 增加配置:
    站点配置文件 _config.yml 中 markdown-it 的 plugins 下面增加 - markdown-it-emoji

  • 用法::)

  • 效果:😃

让 markdown 支持按键格式

  • 安装插件:

    npm i markdown-it-kbd --save

  • 增加配置:
    站点配置文件 _config.yml 中 markdown-it 的 plugins 下面增加 - markdown-it-kbd

  • 用法:[[ctrl]] [[+]] [[D]]

  • 效果:ctrl + D

寻找插件的通用方法

https://www.npmjs.comhttps://www.github.commarkdown-it + keyword 为关键字搜索

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