如果使用 Hexo 作为静态博客的话，自身带的 Marked 并不能很好的展示 LaTeX 公式，所以要做一些操作才能显示 LaTeX 公式的渲染。支持 web LaTeX 公式的渲染 有 MathJax 与 KaTeX 插件。

  KaTeX 优点在于轻量级，而 LaTeX 对数学公式的支持更全面一些。因此，这里主要是配置一下 LaTeX 的支持。可以任意选择一个使用，不过，官方建议使用 KaTeX 渲染。

安装基于 Mathjax 的支持

  1. 安装 kramed插件，移除 marked 插件

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

  2. 更改配置文件

    打开博客根目录下的 /node_modules/hexo-renderer-kramed/lib/renderer.js,修改：

    1
    2
    3
    4
    5
    // Change inline math rule
    function formatText(text) {
      // Fit kramed's rule: $$ + \1 + $$
      return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
    }

修改为：

1
2
3
4
// Change inline math rule
function formatText(text) {
    return text;
}

  1. 安装 hexo-renderer-mathjax 插件：

    1
    npm install hexo-renderer-mathjax --save

  2. 更新 Mathjax 配置
    打开/node_modules/hexo-renderer-mathjax/mathjax.html将最后一行的 <\script> 改为：

    1
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

  3. 更改默认转义原则
    打开/node_modules\kramed\lib\rules\inline.js做如下更改(注意被注释的两行2 与 12 行):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     var inline = {
      //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
      escape: /^\\([`*\[\]()#$+\-.!_>])/,
      autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
      url: noop,
      html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/   \1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
      link: /^!?\[(inside)\]\(href\)/,
      reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
      nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
      reffn: /^!?\[\^(inside)\]/,
      strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,     
      //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
      br: /^ {2,}\n(?!\s*$)/,
      del: noop,
      text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
      math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
    };

  4. 在主题中开启 Mathjax 支持
    在主题配置文件中打开mathjax：

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

如果使用 KaTeX 的话，应当同时禁用掉 KaTeX选项：

1
2
3
4
5
6
katex:
enable: false
# true 表示每一頁都加載katex.js
# false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
per_page: false
hide_scrollbar: true

  1. 在需要渲染 LaTeX 的文章中开启 mathjax 支持
    在文章的 matterFront-matter 中加入 mathjax: true

  2. 测试
    LaTeX 需要使用 “$ "(靠左显示)，""(靠左显示)， "$ $$”(居中显示) 包裹起来
    例如：

    1
    $$\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}$$

    将显示为：

  3. 注意事项：

    在 Hexo 改变渲染插件后，需要注意特殊字符的用法
    比如： {#name} 就无法渲染，需要改动为： { #name }

安装基于 Katex 的支持

  1. 如果你曾配置过 MathJax 的话，需要首先禁用 MathJax,开启 KaTeX：

如果使用 KaTeX 的话，应当同时禁用掉 KaTeX选项：

禁用 MathJax

1
2
3
4
# MathJax
mathjax:
  enable: false
  per_page: false

开启 KaTeX

1
2
3
4
5
6
katex:
  enable: true
  # true 表示每一頁都加載katex.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true
  1. 安装 hexo-renderer-markdown-it 插件，如果使用过 MathJax 可能还需要卸载其他 渲染插件：
1
2
3
4
5
npm un hexo-renderer-marked --save # 如果有安裝這個的話，卸載
npm un hexo-renderer-kramed --save # 如果有安裝這個的話，卸載

npm i hexo-renderer-markdown-it --save # 需要安裝這個渲染插件
npm install @neilsustc/markdown-it-katex --save #需要安裝這個katex插件

由于我这里配置过 MathJax 并安装了 hexo-renderer-mathjax，所以，需要卸载：

1
npm un hexo-renderer-mathjax --save # 如果有安裝這個的話，卸載
  1. 配置 KaTeX 到配置文件：
    在 hexo 根目录中，找到 _config.yml 中配置：
1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false
  1. 如果 butterfly 配置中， KaTeX 的per_page 为false，则不要忘记在 文章的 matterFront-matter 中加入 mathjax: true
1
katex: true
  1. 测试
    KaTeX 需要使用 “$ "(靠左显示)，""(靠左显示)， "$ $$”(居中显示) 包裹起来

  • 例一：

    1
    $\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}$

    将显示为：

    lim⁡h→0f(x+h)−f(x)h\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}

  • 例二：

    1
    $$\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}$$

    将显示为：

    lim⁡h→0f(x+h)−f(x)h\lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}

  • 例三：

    1
    $\sqrt{3x-1}+(1+x)^2$

    3x−1+(1+x)2\sqrt{3x-1}+(1+x)^2

  • 例四：

    1
    $$\sqrt{3x-1}+(1+x)^2$$

    3x−1+(1+x)2\sqrt{3x-1}+(1+x)^2