现已支持在文章中显示公式（LaTeX + MathJax）

陪她去流浪 桃子 2018年05月13日 编辑 阅读次数：3151

最近学数学比较多，可能会贴一些公式，所以给博客增加了数学公式显示的功能，写篇文章记录一下过程。

2024-04-20 更新：因为简化数学公式的处理，本文的一些观点可能已经过时/页面不能正常显示。

公式的显示借助 MathJax.js 插件（好像没有其它选择，不过它已经非常完善了），它能在几乎所有浏览器上排版出非常漂亮的数学公式。

MathJax 简介

#MathJax 用于在网页中显示公式，支持的公式输入包括：LaTeX、MathML、AsciiMath，公式输出包括：HTML-CSS、SVG、CommonHTML等。

注意：如果采用默认的语法，则只需要引入一个 JavaScript 文件即可。本文后面的内容就不用关心了。

使用方式评估

MathJax 默认是自动排版整个页面的公式，公式也不要求放在 HTML 标签内，这与 LaTex 的方式很像。公式直接混合在文字中，并用 $...$ 或 $$...$$ 或 (...) 括起来。 比如：这是一个 $y=x^2$ 公式（我不支持这种方式，不予显示）。

因为公式没有被放在单独的HTML标签（比如 code）中，这样可能有几个小问题：

  • 如果公式包含 < 小于符号，可能会被错误解析。否则可能要写成 &lt; 这种形式，比较麻烦
  • 由于是直接嵌入在文字中的，解析器可能会遍历整个DOM树的节点来查找公式，找到后进行文本替换，可能稍有性能问题（具体不知道它是怎么处理的）

同时，由于我的博客文章是用 Markdown 写的，公式的插入应该像插入代码片段一样简单，所以我决定把它们放在 `` 中。

比如：

  • 行内公式

    这是一个 `$y=x^2$` 公式。

  • 块公式

    这是一个 ```$$y=x^2$$``` 公式。

这样还有一个好处：避免与代码的插入方式冲突。

注：MathJax 默认不处理 <code></code> 中的数学公式。

这样一来，恰好避免了上面两个小问题。并且，由于 <code></code> 默认是有背景色的（你看到了没？），所以就算没有显示公式，公式也很好和文字区分开来。

具体实施方案

GitHub提交记录：新插件：MathJax，用于显示公式 · movsb/taoblog@25aa3d7

  • 像插入代码一样在 Markdown 中插入公式

  • Markdown 编译器把公式编译进 <code></code> 标签中

  • 初始化 MathJax 的配置

    这里值得一提的是，MathJax 要求我们先在一个 <script type="text/x-mathjax-config"></script> 的标签中写入相关的配置，然后才引入插件，目的是为了减少不必要的资源加载。 我的初始化代码如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        jax: ["input/TeX", "output/CommonHTML"],
        extensions: ["tex2jax.js"],
        tex2jax: {
            skipTags: [],
            inlineMath: [['$', '$']],
            displayMath: [['$$', '$$']],
        },
        skipStartupTypeset: true,
        //showMathMenu: false,
        menuSettings: {
            zoom: 'Click',
        }
    });
</script>

    从配置可以看出，我只启用了对 LaTeX 的支持，并禁止了自动排版，并设置了单击为公式放大预览。

  • 加载脚本文件

    我使用了 cloudflare 的 cdn: /mathjax/2.7.4/MathJax.js，目前好像没有被墙。
    如果访问速度过慢，还请在评论里面告知一声，非常感谢！

  • 遍历 <code></code> 并调用 MathJax.Hub.Typeset() 手动排版

    这里有一个问题是：我文章中的代码也是显示在 <code></code> 中的，需要避免。不细说了，具体代码如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    MathJax.Hub.Typeset($('<p>$a$</p>').get(0), function(){
    console.log('typeset warming-up');
    $('code:not([class*="lang"])').each(function(_, e) {
        var html = $(e).html();
        if(html.startsWith('$') && html.endsWith('$')) {
            var wrap = $(html.startsWith('$$') ? '<div/>' : '<span/>')
                .css('margin', '3px')
                .html(html)[0];
            MathJax.Hub.Typeset(wrap);
            console.log('Typeset: ', e);
            $(e).replaceWith(wrap);
        }
});

公式效果展示

结束语

由于我没有使用默认的自动排版，所以我的使用方式看起来非常复杂。但是，最终效果还是很不错的。

文章并没有提到其它的很多细节问题，如果有什么自定义相关的问题，欢迎一起讨论。

另外，评论中暂时不支持显示公式，但是可以插入。

更新

2024-6-17 21:23:25

已经改成服务器渲染，并且替换成了：KaTex + QuickJS。

参考：用 QuickJS 打包编译 KaTex 作为后端公式渲染引擎。

标签：博客日志 · 数学 · MathJax

相关文章