在网页中渲染LaTex公式

MathJax可以实现网页浏览器中的LaTex公式渲染。MathJax的使用就是这么简单、朴实无华。官方文档写了一堆有的没的，实在是没搞懂能干什么。

巽星石

2347人浏览 · 2024-10-06 19:17:18

巽星石 · 2024-10-06 19:17:18 发布

概述

要在自己的网页中显示LaTex公式，可以选择MathJax或KaTeX，两者都是比较成熟的JS库，可以比较简单的方式使用。

MathJax

MathJax功能强大，支持广泛的LaTeX语法，适合复杂的数学表达式，但加载速度较慢。

引入

可以使用特定的模板形式引入和配置，具体可参考：配置mathjax — MathJax 3.2 文档 (osgeo.cn)。其中代码可以以CDN形式引入：mathjax (v3.2.2) -BootCDN。

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-chtml.js">
</script>

使用测试

以下是比较完整的HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<p>$ a_2 = \sin \theta $</p>

<p>这是一个行内公式\(a_2 = \sin \theta\)。</p>
</body>
</html>

通过在body标签中使用 $...$ 或$...$形式可以书写行内LaTex公式，浏览器打开后，渲染为：

<p>$ a_2 = \sin \theta $</p>

<p>这是一个行内公式\(a_2 = \sin \theta\)。</p>

\begin{cases}
a_1 = \sin \theta \\ 
a_2 = \cos \theta
\end{cases}

详细配置

参考自：MathJax的基本使用 - 启明星工作室 - 博客园 (cnblogs.com)

MathJax = {
  options: {
    skipHtmlTags: [            //  不会搜索数学的HTML标签
        'script', 'noscript', 'style', 'textarea', 'pre',
        'code', 'annotation', 'annotation-xml'
    ],
    includeHtmlTags: {         //  可以出现在数学中的HTML标签
        br: '\n', wbr: '', '#comment': ''
    },
    ignoreHtmlClass: 'tex2jax_ignore',    //  标记不搜索标签的类
    processHtmlClass: 'tex2jax_process',  //  标记应搜索的标签的类
    compileError: function (doc, math, err) {doc.compileError(math, err)},
    typesetError: function (doc, math, err) {doc.typesetError(math, err)},
    renderActions: {...}
  }
};

MathJax的使用就是这么简单、朴实无华。官方文档写了一堆有的没的，实在是没搞懂能干什么。

Katex

KaTeX渲染速度快，轻量级，适合对性能要求较高的项目，但支持的LaTeX命令较少。
在这里插入图片描述
CSDN博客以及语雀的Latex公式渲染采用的都是Katex。

使用Katex

我们自己也可以很方便的使用Katex来在自己的页面中渲染Latex公式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
</head>
<body>
A_2 + B_2
</body>
<script>
katex.render(document.body.innerText,document.body);
</script>
</html>

● 7、8行：在<head>部分引入CSS和katex.min.js
● 11行：在<body>部分写入要渲染的Latex公式
● 14行：在<body>之外，使用JavaScript执行公式渲染
渲染效果：
在这里插入图片描述
可以看到Katex相对简单的多。渲染效果也还是可以的。