MathJax 是一个开源的 JavaScript 库，用于在网页中渲染数学公式。它支持 LaTeX、MathML 和 AsciiMath 格式，并能将这些数学公式渲染为高质量的 HTML、SVG 或 MathML 格式，从而在不同的浏览器和设备上显示一致的数学符号和公式。
npm安装
npm install mathjax
在main.js中
import "@/utils/mathjax"; // 必须在引入mathjax前引入mathjax的配置文件
import "mathjax/es5/tex-mml-chtml"; // 使用 tex-mml-chtml
utils/mathjax.js
// @ts-nocheck
// mathJax全局配置文件
window.MathJax = {
tex: {
inlineMath: [
["$", "$"],
["\(", "\)"],
], // 行内公式选择符
displayMath: [
["$$", "$$"],
["\[", "\]"],
], // 段内公式选择符
},
startup: {
ready() {
MathJax.startup.defaultReady();
},
},
};
vue组件里使用
静态:
<div class="quantum-state">$$H|0\rangle = \frac{1}{\sqrt{2}}(|0\rangle + |1\rangle) = |+\rangle$$</div>
动态渲染：
使用 `v-html` 渲染公式
Vue 模板中的 `{{ }}` 会将内容作为普通文本插入到 DOM 中，而不会处理 HTML 或 MathJax 的公式内容。要正确渲染 MathJax，需要使用 `v-html`。
<div ref="mathjaxContainer1" v-html="store.Tai[store.recordCoinState[0]]"></div>
let store = reactive({
Tai:[
// `$$|0\rangle = \begin{pmatrix} 1 \\ 0 \end{pmatrix}$$`,//确保 LaTeX 公式中的反斜杠 `` 被正确写为 `\`，否则 JavaScript 会将其解释为转义字符。
'$$|0\\rangle = \\begin{pmatrix} 1 \\\\ 0 \\end{pmatrix}$$',
'$$|1\\rangle = \\begin{pmatrix} 0 \\\\ 1 \\end{pmatrix}$$'
// '$$|1\rangle = \begin{pmatrix} 0 \\ 1 \end{pmatrix}$$'
],
使用 `nextTick` 确保 Vue 完成 DOM 渲染后再触发 MathJax 的重新解析。
// 重新渲染MathJax 公式
nextTick(() => {
console.log(MathJax);
console.log(mathjaxContainer1.value.innerHTML);
MathJax.typesetPromise([mathjaxContainer1.value]);
});
最终效果图：
以下是一个完整的 HTML 文件，展示 MathJax 支持的各种功能和公式类型，包括行内公式、块级公式、矩阵、分数、根号、积分、求和、上下标、对齐公式等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathJax Examples</title>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.formula {
margin: 20px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background: #f9f9f9;
}
</style>
</head>
<body>
<h1>MathJax Examples</h1>
<div class="formula">
<h2>1. 行内公式</h2>
<p>这个是行内公式的例子：\( a^2 + b^2 = c^2 \)。</p>
</div>
<div class="formula">
<h2>2. 块级公式</h2>
<p>这是一个块级公式的例子：</p>
$$ E = mc^2 $$
</div>
<div class="formula">
<h2>3. 分数和根号</h2>
<p>分数公式：\( \frac{a}{b} \)。</p>
<p>根号公式：\( \sqrt{a^2 + b^2} \)。</p>
<p>复合公式：块级形式：</p>
$$
\frac{\sqrt{x^2 + y^2}}{a + b}
$$
</div>
<div class="formula">
<h2>4. 矩阵</h2>
<p>这是一个矩阵的例子：</p>
$$
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{bmatrix}
$$
</div>
<div class="formula">
<h2>5. 积分和求和</h2>
<p>积分公式：</p>
$$
\int_{a}^{b} x^2 \, dx
$$
<p>求和公式：</p>
$$
\sum_{n=1}^{\infty} \frac{1}{n^2}
$$
</div>
<div class="formula">
<h2>6. 上下标</h2>
<p>这是一个上下标的例子：</p>
$$
E = mc^2 \quad \text{和} \quad x_i^2 + y_j^2
$$
</div>
<div class="formula">
<h2>7. 对齐公式</h2>
<p>这是一个对齐公式的例子：</p>
$$
\begin{align}
a^2 + b^2 &= c^2 \\
x^2 + y^2 &= z^2
\end{align}
$$
</div>
<div class="formula">
<h2>8. 极限</h2>
<p>极限公式：</p>
$$
\lim_{x \to \infty} \frac{1}{x} = 0
$$
</div>
<div class="formula">
<h2>9. 多行公式</h2>
<p>这是一个多行公式的例子：</p>
$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
&= (x + 1)^2
\end{aligned}
$$
</div>
<div class="formula">
<h2>10. 几何符号</h2>
<p>这是一个几何符号的例子：</p>
$$
\angle ABC \quad \triangle ABC \quad \overrightarrow{AB} \quad \overline{AB}
$$
</div>
<div class="formula">
<h2>11. 逻辑符号</h2>
<p>这是一些逻辑符号的例子：</p>
$$
\forall x \in \mathbb{R}, \; \exists y \; \text{使得} \; x + y = 0
$$
$$
P \implies Q \quad P \iff Q
$$
</div>
<div class="formula">
<h2>12. 集合</h2>
<p>这是一些集合公式的例子：</p>
$$
A \cup B \quad A \cap B \quad A \setminus B \quad A \subseteq B
$$
</div>
</body>
</html>
