MathJax - Hexo Next渲染LaTex数学公式

发表于 更新于 本文字数： 890 阅读时长 ≈ 3 分钟

MathJax是一个JavaScript插件，可以在前端实现对LaTex数学公式的解析渲染。

MathJax - Hexo Next渲染LaTex数学公式

0 MathJax

MathJax | Beautiful math in all browsers

Beautiful math in all browsers

A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

MathJax是一个JavaScript显示引擎，可以在浏览器端渲染数学公式。

1 Next的配置文件

我采用的Hexo静态Web框架，Hexo主题功能完善，包含了MathJax配置选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# Math Equations Render Support
math:
  enable: true

  # Default (true) 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 false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    # For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com)
    #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML

    # See: https://mhchem.github.io/MathJax-mhchem/
    #mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
    #mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.
  katex:
    # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

    copy_tex:
      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
      enable: false
      copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
      copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

  1. 启用math渲染支持enable: true；
  2. 默认渲染模式是per_page: true，表示渲染每一个front-matter中包含mathjax: true的页面；
  3. 默认引擎是mathjax，也可以选用katex引擎；
  4. CDN选项采用默认配置即可。

2 更换MarkDown渲染引擎

Hexo默认的MarkDown引擎marked不支持MathJax。

在渲染生成静态页面时，marked没有跳过MathJax段（使用%% ... %%或% ... %标记），而是会对MathJax段内的内容进行MarkDown解析，例如：%% <math exprs>_<math exprs>_<math exprs>中，成对小下划线_ _被解析为MarkDown格式符，被渲染为<em><math exprs></em>的HTML标签，在前端会显示为斜体。这就意味着，前端加载MathJax再解析的时候，公式内容已经被替换修改过了，不再是LaTex公式。

在以下公式中，成对的小下划线会被错误解析为MarkDown的斜体：

1
2
3
$$
{\mathcal L}_{cyc}(G,F)={\mathbb E}_{x \sim p_{data}(x)}[{\|F(G(x))-x\|}_{1}]+{\mathbb E}_{y \sim p_{data}(y)}[{\|G(F(y))-y\|}_{1}]
$$

通过在博客目录下执行以下命令更换MarkDown渲染引擎即可：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 卸载默认的marked渲染引擎；
  2. 安装支持MathJax的kramed渲染引擎。

重新生成Hexo站点后，即可看到正常渲染的内容：

1
2
hexo clean
hexo s

\[ {\mathcal L}_{cyc}(G,F)={\mathbb E}_{x \sim p_{data}(x)}[{\|F(G(x))-x\|}_{1}]+{\mathbb E}_{y \sim p_{data}(y)}[{\|G(F(y))-y\|}_{1}] \]

确认无误后再进行部署：

1
hexo g -d

3 常见问题

3.1 跨平台同步修改后的hexo环境？

通过GitHub对项目源代码进行同步，在新环境执行：

1
npm install

即可自动部署完成所需NPM包组件。

可以在Hexo的站点目录下查看package.json获悉该站点的主要包：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-kramed": "^0.1.4",
    "hexo-renderer-pug": "0.0.5",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3"
  }
}

对站点NPM包的安装、卸载、升级更新都会自动修改该记录文件。