在hexo使用mathjax

Preface

本文是对在hexo下使用数学公式的方法记录,还是折腾了几十分钟,网上的有些文章有些太老了。

我使用的是MathJax。MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers。

hexo-math是别人写好的一个自动部署MathJaxhexo插件。


使用

先安装hexo-math

1
npm install hexo-math --save

接下来这里网上很多文章说要执行hexo math install,但是执行这个是没什么用的,hexo会提醒你没这个命令。

hexo-mathgithub已经给出了说明:

自从1.0.6版本过后,hexo-math使用了一种不同的方法注入MathJax到你的站点中,所以不需要再执行hexo math install,如果你之前执行过,执行hexo math即可


接下来在你博客的配置文件config.yml加上如下的配置

config.yml

1
2
3
4
5
6
7
8
9
10
11
math:
engine: 'mathjax' # or 'katex'
mathjax:
src: custom_mathjax_source
config:
# MathJax config
katex:
css: custom_css_source
js: custom_js_source # not used
config:
# KaTeX config

在博客主题配置文件config.yml开启mathjax

1
2
# Enable Mathjax
mathjax: true


实践

在输入数学公式的时候,需要在数学公式的前后加入$$$符号,将需要输入的公式加入到$$$中间。

$$会使公式居中,$不会。

1
2
3
$h(\theta) =$
$$h(\theta) =$$
$\alpha$

展示如下

$h(\theta) =$
$$h(\theta)=$$
$\alpha$


存在的问题

到现在为止,还是存在一些问题的,

比如如下这一段

1
2
3
4
5
6
7
8
$$
\begin{eqnarray}
\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{eqnarray}
$$

1.png

会出现一些问题,原因是hexo先用marked.js渲染,然后再交给MathJax渲染。在marked.js渲染的时候下划线_是被escape掉并且换成了<em>标签,即斜体字,另外LaTeX中的\\也会被转义成一个\,这样会导致MathJax渲染时不认为它是一个换行符了。


修复问题(使Marked.js与MathJax共存)

通过修改marked.js源码的方式来避开这些问题

  • 针对marked.jsMathjax对于个别字符二次转义的问题,我们只要不让marked.js去转义\\,\{,\}MathJax中有特殊用途的字符就行了。
  • 针对下划线的问题,取消_作为斜体转义,因为marked.js*也是斜体的意思,所以取消掉_的转义并不影响我们使用markdown,只要我们习惯用*作为斜体字标记就行了。
    具体修改方式,用编辑器打开marked.js(在./node_modules/marked/lib/中)

Step 1:

1
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

替换成

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

这一步是在原基础上取消了对\\,\{,\}的转义(escape)


Step 2:

1
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

替换成

1
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,


重启hexo,可以看见前面那段被渲染成如下这样了

2.png

如果重启没有效果,执行下hexo clean


参考

hexo-math
搭建一个支持LaTEX的hexo博客
Hexo下mathjax的转义问题
如何在 hexo 中支持 Mathjax?

关注我的微信公众号[李一二],即时看更多的文章