hexo博客数学公式显示

发表于 | 分类于 ，

Hexo上数学公式的显示

起因

博客上大部分的知识是基于文献的整理，其中就有大量的公式书写。在markdown编辑器上写好的含有公式的博客上传时候公式是无法显示的，上网搜索发现是自己的Hexo配置问题。

解决办法

安装插件

在博客文件目录下安装插件。命令如下：

1
npm install hexo-math --save

同时在站点配置文件中加入以下配置：

1
2
3
4
5
6
7
8
9
10
11
math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    src: # "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
    config:
      # MathJax config
  katex:
    css: #custom_css_source
    js: #custom_js_source # not used
    config:
      # KaTeX config

其实仅仅配置了engine选项，其他均为空，即默认配置。

下一步在主题（next）配置文件中修改mathjax配置：

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

最后是在博客文件前面的Front-matter中将mathjax选项设为true。如下所示：

1
2
3
4
5
6
7
8
9
10
title: 2018-01-13hexo博客数学公式显示
mathjax: true
date: 2018-01-13 10:02:59
tags:
- hexo
- mathjax
categories:
- hexo
- 细节配置
urlname: use_mathjax_in_hexo

注意，冒号后面要有空格。

文章内开启mathjax的好处在于对于不含有公式的文章可以不加载mathjax，提高了加载速度。

新的问题

网上很多文章提到Hexo中对下划线’_’的处理是转换成 <em>标签,代表斜体。这就影响了mathjax对数学公式中下标的处理。类似的还有’*’, ‘{‘, ‘}’, ‘\’等。

安装hexo-renderer-kramed

hexo-renderer-kramed是在原有渲染引擎hexo-renderer-marked基础上修改bug优化而来的。首先卸载原有的渲染引擎，再安装新的。在博客的根目录输入以下命令：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

hexo-renderer-kramed内也存在着语义冲突的问题。解决办法如下。
在博客文章根目录下进入node_modules\kramed\lib\rules\inline.js。打开文件找到第11行，进行修改：

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

同时对第20行也进行修改：

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

然后重启hexo。

1
hexo clean && hexo g

公式显示

行内公式$E=mc^{2}$，$\sin \alpha +\sin \beta =2\sin \dfrac {\alpha +\beta }{2}\cos \dfrac {\alpha -\beta }{2}$ 等。

行间公式

参考链接

Hexo中使用MathJax公式

在Hexo中渲染MathJax数学公式

本文内容大部分根据以上两篇文章整理而来，非常感谢原作者。

其他资源：

MathJax使用LaTeX语法编写数学公式教程

在线手写公式网站