Hexo Stellar 主题优化配置,主要的特性与功能包括:
- Markdown-it 渲染引擎以及插件配置
- KaTex 公式设置
- 复杂的 Markdown 表格
- 定义文本颜色
- 复选框、emoji、键盘按键
- 寻找插件的通用方法
本文的方法主要是基于 Hexo 插件,与主题没有强关联,理论上适用于任何 Hexo 主题。
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
16markdown:
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'
写法:
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
效果:
© © ® ® ™ ™ (p) (P) ±
上面配置中,plugins
下面的五个插件,是自带的五个插件,下发与实现效果如下:
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
8plugins:
- 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\}}}}$ |
inline 格式的效果: ,可以与文字显示在同一行。
inline 带颜色格式的效果: ,可以与文字显示在同一行,同时还可以设置颜色。
1 | $${\color{Green}{\underline{P\{a<X\le b\}}}}$$ |
复杂的 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
8plugins:
- plugin:
name: markdown-it-multimd-table
enable: true
options:
multiline: true
rowspan: true
headerless: true
用法与效果
1 | | Markdown | Rendered HTML | |
Markdown | Rendered HTML |
---|---|
| Italic |
|
|
|
|
1 | Stage | Direct Products | ATP Yields |
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 | |--|--|--|--|--|--|--|--| |
♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
♟ | ♞ | ||||||
♗ | ♟ | ||||||
♙ | |||||||
♘ | |||||||
♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
可以设置文字颜色插件
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
12plugins:
- 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 | [ ] 选中 item 1 |
效果:
让 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
- Stellar 主题提供了复选框、emoji 表情、键盘按键标签插件,可以满足使用需求
- 如果你经常更换主题,那么可以使用 markdown-it 的插件的方式实现,免去了更换主题后修改标签的写法的工作量
寻找插件的通用方法
在 https://www.npmjs.com 或 https://www.github.com 以 markdown-it
+ keyword
为关键字搜索
如 markdown-it
+ table
搜索 markdown-it
的表格插件