Hexo 渲染数学公式

前言

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	✔️	✔️	✔️

安装过程

卸载已有渲染器

npm un 渲染器名称 --save

以我的为例

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

安装新渲染器

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

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

markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix: 
    linkify: true
    typographer: false # 改为false解决“英文的引号会被渲染为中文的引号”的问题
    quotes: “”‘’
    pre_class: highlight

配置Next主题文件themes\next\_config.yml, 启用mathjax

math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: false

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

安装自动部署MathJax的hexo插件

npm install hexo-math --save

配置成功后公式示例

单行公式

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

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

多行公式失败

$$
\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}

安装完成后所有npm包

查看命令

npm list --depth=0

输出结果

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