Hexo 添加 MathJax 数学公式渲染

Hexo Freemind 主题使用 MathJax 渲染公式入门指南

最近想在博客上写些带有公式的文章，但却发现 Hexo 渲染公式的问题让人十分恼火。本着不怕折腾的精神，看了很多博文，也尝试可好几种解决方案，都以失败告终。今天，终于大功告成，虽然针对整个 Hexo 的完美解决方法仍需要详细探讨，但适用于 Freemind 主题的详细解决方案已然寻得。

1. 添加 MathJax 支持

向 hexo_root\themes\freemind\layout\_partial 文件夹中添加 mathjax.ejs 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    menuSettings: {
      zoom: "None"
    },
    showMathMenu: false,
    jax: ["input/TeX","output/CommonHTML"],
    extensions: ["tex2jax.js"],
    TeX: {
      extensions: ["AMSmath.js","AMSsymbols.js"],
      equationNumbers: {
        autoNumber: "AMS"
      }
    },
    tex2jax: {
      inlineMath: [["\\(", "\\)"]],
      displayMath: [["\\[", "\\]"]]
    }
  });
</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.6.1/MathJax.js"></script>
</script>

向 hexo_root\themes\freemind\layout\_partial\after_footer.ejs 文件中添加如下代码：

1
2
3
<% if (page.mathjax){ %>
<%- partial('mathjax') %>
<% } %>

向站点配置文件 hexo_root\_config.yml 中添加如下设置：

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

2. 更改默认渲染引擎

卸载 Hexo 默认的 Markdown 渲染插件 hexo-renderer-marked：

1
2
3
$ npm uninstall hexo-renderer-marked --save
or
$ npm un hexo-renderer-marked --save

安装新的增强型 Markdown 渲染插件 hexo-renderer-kramed：

1
2
3
$ npm install hexo-renderer-kramed --save
or
$ npm i hexo-renderer-kramed --save

并再次向站点配置文件 hexo_root\_config.yml 中添加如下设置：

1
2
3
4
5
6
7
8
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

3. 文章启用 MathJax

前面的方法允许文章选择性加载 MathJax 渲染公式，在每篇文章头部添加 mathjax: true 即选择使用 MathJax 渲染公式。如果不添加，则本篇文章不加载 MathJax 渲染公式，如此可以节约资源，增加网页访问速度。本文头部设置如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: Hexo 添加 MathJax 数学公式渲染
date: 2018-06-27 21:30:00
tags: Hexo教程
categories: Hexo建站
description: "Hexo Freemind 主题使用 MathJax 渲染公式入门指南"
shadow: true
mathjax: true
feature: /images/hexo.jpg
toc: true
---

4. 公式显示效果测试

行内公式测试：， 。注意，根据 hexo-renderer-marked 说明，行内公式格式为：

1
2
`$f(x)=ax+b$` 
`$\sqrt(\frac{a^2+b^2}{a^2-b^2})$`

若想在行内显示$some code$符号，格式如下：

1
` $some code$ `

进一步，若想在行内显示$$或者$$，格式如下：

1
2
` $$ `
\$\$

行间公式测试1：

行间公式测试2（换行测试，用 \ 可正常换行）：

1
2
3
4
5
6
7
$$
f(n) = \begin{cases}
 \frac{n}{2},
 & \text{if } n\text{ is even}
 \\ 3n+1, & \text{if } n\text{ is odd}
 \end{cases}
$$

行间公式测试3（换行测试，用 \\ 代替 \ 也可实现换行）：

1
2
3
4
5
6
7
8
9
$$
f(n) = \begin{cases}
 \frac{n}{2},
 & \text{if } n\text{ is even}
 \\\ 3n+1, & \text{if } n\text{ is odd}
 \end{cases}
$$

$$f(x): \begin{cases} x, x>0 \\\ -x,x<0 \end{cases}$$

5. 总结

利用 mathjax.ejs 和增强型 Markdown 插件 hexo-renderer-kramed，本文实现了 Freemind 主题下的公式渲染，但是这并不意味着文中的方法也适用于其他主题。本文仅作为使用 Freemind 主题的用户参考。

留言

▲