前言

Hexo默认的Markdown渲染器是hexo-renderer-marked，并不支持Mathjax，不支持emoji表情，之前为了让网页显示emoji, 将渲染器更换为hexo-renderer-markdown-it, 最近发现该渲染器也不支持Mathjax，为了让网页显示数学公式，再次更换渲染器。

Hexo常见的Markdown渲染器有：hexo-renderer-marked，hexo-renderer-kramed，hexo-renderer-pandoc，hexo-renderer-markdown-it，hexo-renderer-markdown-it-plus，其简单对比如下（参考于：Hexo的多种Markdown渲染器对比分析），

渲染器 Mathjax 插件扩展 emoji表情
hexo-renderer-marked ❌ ❌ ❌
hexo-renderer-kramed ✔️ ❌ ❌
hexo-renderer-pandoc ✔️ ❌
hexo-renderer-markdown-it ✔️（支持不太好） ✔️ ✔️
hexo-renderer-markdown-it-plus ✔️ ✔️ ✔️

安装过程

卸载已有渲染器

1
npm un 渲染器名称 --save

以我的为例

1
npm un hexo-renderer-markdown-it --save

安装新渲染器

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

配置站点文件_config.yml, 添加如下内容

1
2
3
4
5
6
7
8
9
10
markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix: 
    linkify: true
    typographer: false # 改为false解决“英文的引号会被渲染为中文的引号”的问题
    quotes: “”‘’
    pre_class: highlight

配置Butterfly主题文件, 启用katex mathjax 有坑 !!

安装自动部署MathJax的hexo插件

npm install hexo-math --save

配置成功后公式示例

单行公式

1
2
3
$$
\nabla\cdot\vec{E} = \frac{\rho}{\epsilon_0}
$$

∇⋅E⃗=ρϵ0\nabla\cdot\vec{E} = \frac{\rho}{\epsilon_0}

多行公式失败

1
2
3
4
5
6
7
8
$$
\begin{ align }
\nabla\cdot\vec{E} &= \frac{ \rho }{ \epsilon_0 } \\
\nabla\cdot\vec{ B } &= 0 \\
\nabla\times\vec{ E } &= -\frac{\partial B}{ \partial t } \\
\nabla\times\vec{ B } &= \mu_0\left(\vec{ J }+\epsilon_0\frac{ \partial E }{ \partial t } \right)
\end{ align }
$$

\begin{align} \nabla\cdot\vec{E} &= \frac{\rho}{ \epsilon_0 } \\ \nabla\cdot\vec{B} &= 0 \\ \nabla\times\vec{E} &= -\frac{\partial B}{ \partial t } \\ \nabla\times\vec{B} &= \mu_0\left(\vec{ J }+\epsilon_0\frac{ \partial E }{\partial t} \right) \end{align}

还有一个bug,渲染公式总是出现两行,还有一些公式根本就是渲染错误

  1. 查出问题是版本问题,引入一个css文档即可.
  2. <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.10.2/katex.min.css" rel="stylesheet">
  3. 原文

安装完成后所有npm包

查看命令

1
npm list --depth=0

输出结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
hexo-site@0.0.0 D:\GitHub\Hexo
+-- @waline/hexo-next@3.0.1
+-- bindings@1.5.0 extraneous
+-- file-uri-to-path@1.0.0 extraneous
+-- hexo-baidu-url-submit@0.0.6
+-- hexo-deployer-git@3.0.0
+-- hexo-generator-archive@1.0.0
+-- hexo-generator-baidu-sitemap@0.1.9
+-- hexo-generator-category@1.0.0
+-- hexo-generator-index@2.0.0
+-- hexo-generator-searchdb@1.4.1
+-- hexo-generator-sitemap@3.0.1
+-- hexo-generator-tag@1.0.0
+-- hexo-helper-live2d@3.1.1
+-- hexo-hide-posts@0.2.0
+-- hexo-math@4.0.0
+-- hexo-renderer-ejs@2.0.0
+-- hexo-renderer-markdown-it-plus@1.0.6
+-- hexo-renderer-stylus@2.1.0
+-- hexo-server@3.0.0
+-- hexo-symbols-count-time@0.7.1
+-- hexo-tag-mmedia@1.1.7
+-- hexo-theme-landscape@0.0.3
+-- hexo-toc@1.1.0
+-- hexo@6.3.0
+-- live2d-widget-model-hijiki@1.0.5
+-- markdown-it-emoji@2.0.2
`-- nan@2.17.0 extraneous

反正暂时也够用了,等后续官方慢慢修复吧~