在网页中渲染LaTex公式

news2024/11/26 15:32:01

概述

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: {...}
  }
};