渲染数学公式之--MathJax

前端渲染公式的实现原理

前端渲染数学公式的实现原理通常涉及以下几个主要方面：

一、解析输入

1.语法解析：

• 对于使用类似 LaTeX 语法的库（如 MathJax、KaTeX），需要解析输入的 LaTeX 表达式。这通常涉及识别特定的命令、符号和语法结构。例如，识别 \frac{a}{b} 表示分数，\sqrt{x} 表示平方根等。
• 对于其他特定语法的库（如 MathQuill 使用自己的交互语法），也需要解析相应的输入规则。

2.构建内部表示：

• 使用专门的解析器将输入的公式字符串转换成内部表示（如抽象语法树AST）。这个过程涉及到词法分析和语法分析，以确保公式的结构被正确理解和识别。

二、渲染过程

1.排版和布局：

• 根据公式的内部表示，确定每个符号、字符和子表达式的位置和大小。这涉及到字体选择、字号设置、行距、对齐方式等排版参数的计算。
• 对于复杂的公式，可能需要进行复杂的布局计算，以确保各个部分正确地组合在一起，并且不会出现重叠或不适当的间距。

2.绘制和显示：

• 使用 HTML、CSS 和 SVG 等前端技术来绘制公式。例如，可以使用 <span> 元素和 CSS 样式来设置字体和颜色，或者使用 SVG 图形来绘制特定的符号（如积分符号、根号等）。
• 将绘制好的公式插入到网页中，通常是在特定的容器元素内。这可以通过直接操作 DOM 来实现，或者使用前端框架提供的方法来更新页面内容。

三、渲染输出

1.浏览器渲染引擎：

• 最后，浏览器的渲染引擎会根据DOM结构和CSS样式将公式呈现到屏幕上。 2.自定义渲染引擎：
• 有些库可能会使用自己的渲染引擎，绕过浏览器的标准渲染流程，以实现更高的性能或特定的视觉效果。

前端渲染公式有哪些库

在前端渲染公式时，有多个渲染库可以选择。以下是一些常用的前端公式渲染库：

• KaTeX是一个快速且功能丰富的数学公式渲染库，专为Web设计。它由Khan Academy开发，提供接近印刷品质的数学公式展示，同时保持与浏览器的高效互动性。KaTeX支持服务器端渲染，可以预渲染公式并作为纯HTML发送，减轻客户端负担。
• MathJax是一个广泛使用的JavaScript库，能够将LaTeX和其他数学标记语言转换为HTML和SVG，以便在网页上进行显示。MathJax支持多种输出格式，包括HTML-CSS、SVG和MathML，适用于广泛的设备和浏览器。
• MathQuill是一个强大的JavaScript库，用于在网页上渲染和编辑数学公式。可以将输入的数学公式转换为不同的格式，如 LaTeX、MathML 等，方便与其他工具或系统进行交互。（开源，已经很久没更新了）

KaTeX与MathJax有何不同

KaTeX和MathJax都是用于在网页上渲染数学公式的JavaScript库，但它们在多个方面存在显著差异：

渲染速度

KaTeX：

• 以快速渲染著称，特别适合实时渲染大量数学公式或在性能较低的设备上使用。
• 使用C++编写的核心库进行预编译，从而提高了执行速度。

MathJax：

• 相比之下渲染速度较慢，尤其是在处理复杂公式或大量公式时。
• 采用纯JavaScript实现，需要在客户端逐个解析和排版公式。

兼容性

KaTeX：

• 对现代浏览器的支持较好，但在一些旧版浏览器上可能存在兼容性问题。
• 不支持MathML输出。

MathJax：

• 具有更广泛的浏览器兼容性，包括一些较老的浏览器版本。
• 支持多种输出格式（HTML-CSS、SVG和MathML），使得它在不同设备和平台上的适应性更强。

集成与定制

KaTeX：

• 设计简洁，API相对简单，易于集成到项目中。
• 提供了一些定制选项，但可能不如MathJax丰富。 MathJax：
• 提供了丰富的配置选项和扩展机制，允许高度定制渲染过程。
• 社区支持强大，有大量的插件和扩展可供使用。

服务器端渲染

KaTeX：

• 支持服务器端渲染，可以将公式预渲染成静态HTML，加快页面加载速度并改善SEO。

MathJax：

• 主要是客户端渲染，虽然也可以通过一些额外的设置实现服务器端渲染，但通常不如KaTeX方便或高效。

功能特性

KaTeX：

• 功能相对集中，专注于快速且准确地显示数学公式。
• 不支持某些复杂的LaTeX宏包和某些高级排版功能。 MathJax：
• 功能更为全面，能够处理更复杂的数学结构和符号。
• 支持广泛的LaTeX命令及扩展。

社区和使用情况

KaTeX：

• 由Khan Academy维护，近年来获得了不少关注和使用。

MathJax：

• 已经存在多年，拥有庞大的用户基础和社区支持。
• 在学术出版、教育网站及需要展示复杂数学公式的各类网站中应用广泛。

选择MathJax

cdn引入

<script
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
      id="MathJax-script"
      async
></script>

<div class="root">
      <h2>化学公式</h2>
      <p>
        $\mathrm{F}\mathrm{e}+{\mathrm{H}}_{2}{\mathrm{S}\mathrm{O}}_{4}={\mathrm{F}\mathrm{e}\mathrm{S}\mathrm{O}}_{4}+{\mathrm{H}}_{2}\uparrow$
      </p>
      <h2>物理公式</h2>
      <p>$E = mc^2$。</p>
      <h2>数学公式</h2>
      <p>
        $x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$
      </p>
</div>

//...
<script>
       window.MathJax = {
        tex: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
          ],
          displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
          ],
          processEscapes: true,
          processEnvironments: true,
        },
        options: {
          skipHtmlTags: ["script", "noscript", "style", "textarea", "pre"],
        },
      };
      if(window.MathJax && window.MathJax.typeset) {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
      }

</script>

公式渲染演示

需要注意到点是，因为是数据是异步，页面会短暂出现公式原始数据闪烁

MathJax.typeset 和 MathJax.typesetPromise

MathJax.typesetPromise() 函数的主要作用是将指定的 DOM 元素中的数学公式进行排版和渲染。它返回一个 Promise 对象，当数学公式排版和渲染完成时，Promise 将被解析（resolve）。这使得你可以在数学公式渲染完成后执行其他操作，例如在公式显示后执行动画效果。

MathJax.typeset() 是 MathJax 库中的一个函数，用于在网页上重新渲染数学公式。当你修改了页面上的数学公式或者需要重新排版时，可以使用这个函数来更新显示。

与 MathJax.typesetPromise() 不同，MathJax.typeset() 是一个同步函数，它会立即执行排版和渲染操作，而不是返回一个 Promise 对象。这意味着在调用 MathJax.typeset() 后，数学公式会立即更新，而不需要等待 Promise 解析。

MathJax.typeset() 函数在某些情况下可能会导致页面闪烁，因为它会立即更新 DOM。为了避免这种情况，你可以考虑使用MathJax.typesetPromise()，它会在下一个动画帧中执行排版和渲染操作，从而减少闪烁的可能性。

if (window.MathJax && window.MathJax.typeset) {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}

if (window.MathJax && window.MathJax.typesetPromise) {
    // 异步渲染，渲染成功回调，可以先展示loading，渲染完成后再显示公式
    window.MathJax.typesetPromise([dom])
    .then(() => {
        // success
    })
    .catch((err) => {
        // fail
    });
}

mathjax demo地址