Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内即可利用靓丽的主题生成静态网页。使用 Hexo 部署个人博客时,对博文里书写数学公式渲染容易出现错误,导致渲染不成功,发布后的博文数学公式显示为源码,本篇介绍如何在 Hexo 框架中正常显示数学公式。

当在主题(如 next, butterfly 等)中开启 mathjax 开关,并在每篇博文头信息中指定:mathjax: true,此时我们就可以在博文中书写数学公式了,对于行内公式,我们用类似 $y=f(x)$ 的方式来表示。对于行间公式,我们常使用类似下面的形式

1
2
3
$$
f = a * \cos(x) + b * \sin(x)
$$

来表示。

但是,当我们的公式的一些符号,如 *, {, }, \\,相连时容易造成博文中公式渲染出错的问题。有些人尝试将这些符号之间用空格分开,有些是安装一些工具,如 npm i hexo-filter-ignore-formula-rendering,但是,这些方法在我实际测试中发现并不可靠。

值得推荐的方法是,在我们的公式前后用

1
2
3
{% raw %}
数学公式部分
{% endraw %}

来解译公式,让 Hexo 跳过原有规则解释公式,以免发生解析异常。该方法为 Hexo 官方文档 提供的方法,示例如下:

1
2
3
4
5
{% raw %}
$$
f = a * \cos(x) + b * \sin(x)
$$
{% endraw %}

参考文献

  1. Hexo 文档