MathJax的基本使用
<h3 id="一引言">一、引言</h3>
<p><code class="language-plaintext highlighter-rouge">MathJax</code>引擎是一个开源的JavaScript库，它允许Web开发者在网页中嵌入高质量的数学公式。通过利用Web的最新技术，MathJax引擎可以解析LaTeX、MathML和AsciiMath等数学标记语言，并将其渲染为可视化的数学公式，这些公式可以在各种浏览器和操作系统上流畅地显示。</p>
<p>使用MathJax引擎，网页作者可以轻松地编写包含数学内容的文档，而无需担心用户的浏览器或操作系统是否能够正确显示这些数学公式。因为MathJax引擎会自动处理这些兼容性问题，确保用户能够以清晰、准确的方式查看数学内容。</p>
<p>MathJax引擎的特点包括：</p>
<ul>
<li>跨平台兼容性：它支持多种浏览器和操作系统，确保数学公式能够在各种设备上正确显示。</li>
<li>高质量的排版：MathJax引擎使用先进的排版算法，确保数学公式能够以清晰、准确的方式呈现。</li>
<li>易于使用：通过简单的标记语言，如LaTeX，用户可以轻松地编写数学公式，并将其嵌入到网页中。</li>
<li>高度可定制性：MathJax引擎提供了丰富的配置选项，允许用户根据自己的需求进行定制，以满足特定的排版和显示要求。</li>
</ul>
<p>总的来说，MathJax引擎是一个功能强大、易于使用的工具，它为Web上的数学内容显示提供了高质量的解决方案。无论是科学论文、教育资料还是技术文档，都可以利用MathJax引擎来呈现复杂的数学公式，提升网页的可读性和专业性。</p>
<h3 id="二使用">二、使用</h3>
<h4 id="1安装">1、安装</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install mathjax@3
</code></pre></div></div>
<h4 id="2配置">2、配置</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>MathJax = {
tex: {
packages: ['base'], // 要使用的扩展
inlineMath: [ // 行内数学公式的开始/结束定界符对
['$', '$'],
['\\(', '\\)']
],
displayMath: [ // 显示数学公式的开始/结束定界符对
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true, // 使用 \$ 来产生一个字面意义上的美元符号
processEnvironments: true, // 在数学模式之外处理 \begin{xxx}...\end{xxx}
processRefs: true, // 在数学模式之外处理 \ref{...}
digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/, // 用于识别数字的模式
tags: 'none', // 标签类型，可选值为 'none'、'ams' 或 'all'
tagSide: 'right', // \tag 宏的位置
tagIndent: '0.8em', // 标签的缩进量
useLabelIds: true, // 使用标签名称而不是标签编号作为 ID
maxMacros: 10000, // 每个表达式允许的最大宏替换次数
maxBuffer: 5 * 1024, // 内部 TeX 字符串的最大大小（5K）
baseURL: (document.getElementsByTagName('base').length === 0) ? '' : String(document.location).replace(/#.*$/, '')), // 当存在 <base> 标签时，用于标签链接的 URL
formatError: (jax, err) => jax.formatError(err) // 当 TeX 语法错误发生时调用的函数
},
options: {
skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre', 'code', 'annotation', 'annotation-xml' ], // 不会搜索数学公式的 HTML 标签
includeHtmlTags: { br: '\n', wbr: '', '#comment': '' }, // 可以出现在数学公式内的 HTML 标签
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: {...} // 渲染操作
},
startup: {
elements: null, // 要进行排版的元素（默认是文档主体）
typeset: true, // 是否执行初始排版
ready: Startup.defaultReady.bind(Startup), // 组件加载完成时调用
pageReady: Startup.defaultPageReady.bind(Startup), // MathJax 和页面准备好时调用
document: document, // 要处理的文档（或片段或字符串）
invalidOption: 'warn', // 无效选项是致命错误还是产生警告
optionError: OPTIONS.optionError, // 用于报告无效选项的函数
input: [], // 要使用的输入引擎的名称（从已加载的引擎中选择）
output: null, // 要使用的输出引擎的名称（从已加载的引擎中选择）
handler: null, // 要注册的处理程序的名称（从已加载的处理程序中选择）
adaptor: null // 要使用的 DOM 适配器的名称（从已加载的适配器中选择）
},
svg: {
scale: 1, // 所有表达式的全局缩放因子
minScale: .5, // 要使用的最小缩放因子
mtextInheritFont: false, // 使 mtext 元素使用周围字体
merrorInheritFont: true, // 使 merror 文本使用周围字体
mathmlSpacing: false, // 为 true 时使用 MathML 间距规则，为 false 时使用 TeX 规则
skipAttributes: {}, // 不复制到输出的 RFDa 等属性
exFactor: .5, // ex 单位的默认大小（以 em 为单位）
displayAlign: 'center', // 当 indentalign 设置为 'auto' 时的默认值
displayIndent: '0', // 当 indentshift 设置为 'auto' 时的默认值
fontCache: 'local', // 字体缓存设置，可选值为 'local'、'global' 或 'none'
localID: null, // 用于本地字体缓存的 ID（用于单方程处理）
internalSpeechTitles: true, // 插入带有语音内容的 <title> 标签
titleID: 0 // 用于 aria-labeledby 标题的初始 ID 编号
}
};
</code></pre></div></div>
<p>按需配置，如果你都不需要，你可以什么也不配置</p>
<h4 id="3复制">3、复制</h4>
<p>需要复制时，在对应公式部分点击 右键 -> Copy to Clipboard -> TeX Commands 即可完成复制 <br />
<img src="https://img.gorpeln.top/blog/2025/17384679236/20250202114523962.png" alt="20250202114523962" /></p>
<h3 id="三例子">三、例子</h3>
<h4 id="1四则运算">1、四则运算</h4>
<h5 id="1加减">1）加减</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a+b-c$
</code></pre></div></div>
<p>效果：$a+b-c$</p>
<h5 id="2乘法">2）乘法</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a\times b$ (注意\times和b之间要有空格)
</code></pre></div></div>
<p>效果：$a\times b$</p>
<h5 id="3分数">3）分数</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\frac{a}{b}$
</code></pre></div></div>
<p>效果：$\frac{a}{b}$</p>
<h5 id="4括号">4）括号</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$(\frac{a}{b})$
$\left( \frac{a}{b} \right)$
$\left[ \frac{a}{b} \right]$
# 当使用\left和\right时，它们会根据所包含内容的大小自动调整括号的大小，使得括号能够合适地包围住内容，看起来更加美观和协调。而普通的小括号()不会自动调整大小，在一些复杂的公式中，可能会出现括号与内容大小不匹配的情况
</code></pre></div></div>
<p>效果： <br />
$(\frac{a}{b})$ <br />
$\left( \frac{a}{b} \right)$ <br />
$\left[ \frac{a}{b} \right]$</p>
<h5 id="5四则组合">5）四则组合</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\frac{(a+b)\times c}{(d-e)\times f}$
</code></pre></div></div>
<p>效果：$\frac{(a+b)\times c}{(d-e)\times f}$</p>
<h4 id="2比较运算">2、比较运算</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a < b$
$a > b$
$a = b$
$a \not= b$
$a \leq b$
$a \geq b$
$a \equiv b$
</code></pre></div></div>
<p>效果： <br />
$a < b$ <br />
$a > b$ <br />
$a = b$ <br />
$a \not= b$ <br />
$a \leq b$ <br />
$a \geq b$ <br />
$a \equiv b$</p>
<h4 id="3上标与下标">3、上标与下标</h4>
<h5 id="1上标">1）上标</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$x^a$, $x^{ab}$, $x^ab$
# 多个字符时，要用花括号代替，不过单个字符时有无花括号是等价的
</code></pre></div></div>
<p>效果：$x^a$, $x^{ab}$, $x^ab$</p>
<h5 id="2下标">2）下标</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a_n$, $a_{nm}$, $a_nm$
# 花括号原理同上
</code></pre></div></div>
<p>效果：$a_n$, $a_{nm}$, $a_nm$</p>
<h5 id="3次方根">3）次方根</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\sqrt a$, $\sqrt[n]a$, $\sqrt[nm]{ab}$
</code></pre></div></div>
<p>效果：$\sqrt a$, $\sqrt[n]a$, $\sqrt[nm]{ab}$</p>
<h5 id="4上下标组合">4）上下标组合</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a_i^2$, $C^2_{10}$
</code></pre></div></div>
<p>效果：$a_i^2$, $C^2_{10}$</p>
<h4 id="4集合间的运算">4、集合间的运算</h4>
<h5 id="1集合">1）集合</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\left\\{
x_1,x_2
\right\\}$
# 不能直接打花括号，必须要有\left,\right
# 可以写成一行，这样仅为了方便查看
</code></pre></div></div>
<p>效果：$\left\{
x_1,x_2
\right\}$</p>
<h5 id="2元素与集合的关系">2）元素与集合的关系</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$A \in B$ // 元素A 属于 集合B
$A \notin B$ // 元素A 不属于 集合B
</code></pre></div></div>
<p>效果： <br />
$A \in B$ <br />
$A \notin B$</p>
<h5 id="3集合与集合的关系">3）集合与集合的关系</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$A \subset B$ // 集合A是集合B的 真子集，意味着A的所有元素都在B中，但B中至少存在一个元素不在A中
$A \subseteq B$ // 集合A是集合B的 子集，即A的所有元素都在B中，A和B有可能相等
$A \supset B$ // 集合A 真包含 集合B，表明B的所有元素都在A中，但A中至少存在一个元素不在B中
$A \supseteq B$ // 集合A 包含 集合B，即B的所有元素都在A中，A和B有可能相等
</code></pre></div></div>
<p>效果： <br />
$A \subset B$ <br />
$A \subseteq B$ <br />
$A \supset B$ <br />
$A \supseteq B$</p>
<h5 id="4集合的基本运算">4）集合的基本运算</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$A \cap B$ // 集合A与集合B的 交集，由既属于A又属于B的所有元素共同组成
$A \cup B$ // 集合A与集合B的 并集，由属于A或者属于B的所有元素合并组成
$A \setminus B$ // 集合A与集合B的 差集，是由所有属于A但不属于B的元素构成的集合，也可表示为 A - B
$\complement_U A$ // 集合A在全集U中的 补集，即全集中所有不属于A的元素所组成的集合
</code></pre></div></div>
<p>效果： <br />
$A \cap B$ <br />
$A \cup B$ <br />
$A \setminus B$ 或 $A - B$ <br />
$\complement_U A$</p>
<h5 id="5集合中的符号">5）集合中的符号</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ \cdot $ // 一个点
$ \cdots $ // 三个点
$ \mid $ // 分隔符
</code></pre></div></div>
<p>效果： <br />
$ \cdot $ <br />
$ \cdots $ <br />
$ \mid $</p>
<h5 id="6集合组合示例">6）集合组合示例</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$A = \left\\{ x_1,x_2,\cdots,x_n \right\\}$ // 定义集合A，集合A由元素x_1, x_2, ..., x_n组成
$A\cap \complement_{A\cup B}B=A - B$ // 集合A与集合B在A和B的并集中的补集的交集，等于集合A与集合B的差集
</code></pre></div></div>
<p>效果： <br />
$A = \left\{ x_1,x_2,\cdots,x_n \right\}$ <br />
$A\cap \complement_{A\cup B}B=A - B$</p>
<h4 id="5常用特殊函数">5、常用特殊函数</h4>
<h5 id="1三角函数">1）三角函数</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\sin x$, $\cos x$, $\tan x$, $\cot x$
# 注意中间的空格
</code></pre></div></div>
<p>效果：$\sin x$, $\cos x$, $\tan x$, $\cot x$</p>
<h5 id="2反三角函数">2）反三角函数</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\arcsin x$, $\arccos x$, $\arctan x$
</code></pre></div></div>
<p>效果：$\arcsin x$, $\arccos x$, $\arctan x$</p>
<h5 id="3双曲函数">3）双曲函数</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\sinh x$, $\cosh x$, $\tanh x$, $\coth x$
</code></pre></div></div>
<p>效果：$\sinh x$, $\cosh x$, $\tanh x$, $\coth x$</p>
<h5 id="4对数">4）对数</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\log_ax$, $\ln x$, $\lg x$
</code></pre></div></div>
<p>效果：$\log_ax$, $\ln x$, $\lg x$</p>
<h4 id="6常用特殊符号">6、常用特殊符号</h4>
<h5 id="1求和">1）求和</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\sum$, $\sum_{i=1}^n$, $\sum_{i=1}^na_i$, $\sum_{i=1}^{na_i}$
</code></pre></div></div>
<p>效果：$\sum$, $\sum_{i=1}^n$, $\sum_{i=1}^na_i$, $\sum_{i=1}^{na_i}$</p>
<h5 id="2无穷">2）无穷</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\infty$, $+\infty$, $-\infty$
</code></pre></div></div>
<p>效果：$\infty$, $+\infty$, $-\infty$</p>
<h5 id="3箭头">3）箭头</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\rightarrow$, $\leftarrow$, $\uparrow$, $\downarrow$
</code></pre></div></div>
<p>效果：$\rightarrow$, $\leftarrow$, $\uparrow$, $\downarrow$</p>
<h5 id="4极限">4）极限</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\lim$, $\lim_{x\rightarrow 0}$, $\lim_{x\rightarrow \infty}$
</code></pre></div></div>
<p>效果：$\lim$, $\lim_{x\rightarrow 0}$, $\lim_{x\rightarrow \infty}$</p>
<h5 id="5积分">5）积分</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\int$, $\int_a^b$, \$int_{ab}^{cd}$
$ \int_a^b \left( -\frac{1}{x^2} \right) dx = \frac{1}{x}|_a^b = \frac{1}{b} - \frac{1}{a} $
</code></pre></div></div>
<p>效果： <br />
$\int$, $\int_a^b$, $int_{ab}^{cd}$ <br />
$ \int_a^b \left( -\frac{1}{x^2} \right) dx = \frac{1}{x}|_a^b = \frac{1}{b} - \frac{1}{a} $</p>
<h5 id="6二重积分">6）二重积分</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\iint$, $\iint_D$
</code></pre></div></div>
<p>效果：$\iint$, $\iint_D$</p>
<h5 id="7三重积分">7）三重积分</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\iiint$, $\iiint_D$
# 以此类推，超过四重的积分不可用
</code></pre></div></div>
<p>效果：$\iiint$, $\iiint_D$</p>
<h5 id="8偏导">8）偏导</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\partial$
</code></pre></div></div>
<p>效果：$\partial$</p>
<h5 id="9梯度">9）梯度</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$\nabla$
</code></pre></div></div>
<p>效果：$\nabla$</p>
<h5 id="10其他">10）其他</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ \star $ , $ \ast $, $ \oplus $, $ \circ $, $ \bullet $
</code></pre></div></div>
<p>效果：$ \star $ , $ \ast $, $ \oplus $, $ \circ $, $ \bullet $</p>
<h4 id="7常用希腊字母">7、常用希腊字母</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ \alpha $ // 阿尔法
$ \beta $ // 贝塔
$ \gamma $ // 伽马
$ \delta $ // 德尔塔，变化量
$ \epsilon $ // 伊普西龙
$ \zeta $ // 泽塔
$ \eta $ // 伊塔，机械效率
$ \lambda $ // 兰姆达，常数
$ \mu $ // 缪，摩擦系数
$ \pi $ // 派，圆周率
$ \rho $ // 柔，极径
$ \sigma $ // 西格马，方差
$ \tau $ // 陶，力矩
$ \phi $ // 斐，欧拉函数
$ \chi $ // 希，卡方分布
$ \omega $ // 欧米伽，电阻
</code></pre></div></div>
<p>效果： <br />
$ \alpha $,
$ \beta $,
$ \gamma $,
$ \Delta $,
$ \epsilon $,
$ \zeta $,
$ \eta $,
$ \lambda $,
$ \mu $,
$ \pi $,
$ \rho $,
$ \sigma $,
$ \tau $,
$ \phi $,
$ \chi $,
$ \omega $</p>
<p><a href="https://img.gorpeln.top/blog/2025/17384679236/20250202114523961.png">更多希腊字母</a></p>
<h4 id="8多行公式">8、多行公式</h4>
<h5 id="1换行">1）换行</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$$
\begin{aligned}
a \\
b,c \\
d
\end{aligned}
$$
# '\\'是换行
</code></pre></div></div>
<p>效果： <br />
\(\begin{aligned}
a \\
b,c \\
d
\end{aligned}\)</p>
<h5 id="2空格">2）空格</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$a \ b $
# '\'表示一空格
</code></pre></div></div>
<p>效果：$a \ b $</p>
<h5 id="3对齐">3）对齐</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$$\begin{aligned}
[(n+1)!+k]\operatorname{mod}k &=(n+1)!\operatorname{mod}k+k\operatorname{mod}k
\\ &=0+0
\\ &=0
\end{aligned}$$
# '&'是对齐
</code></pre></div></div>
<p>效果： <br />
\(\begin{aligned}
[(n+1)!+k]\operatorname{mod}k &=(n+1)!\operatorname{mod}k+k\operatorname{mod}k
\\ &=0+0
\\ &=0
\end{aligned}\)</p>
<h5 id="4方程组">4）方程组</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$$ \begin{cases}
x_1+x_2=2
\\ x_1-x_2=0
\end{cases} $$
</code></pre></div></div>
<p>效果： <br />
\(\begin{cases}
x_1+x_2=2
\\ x_1-x_2=0
\end{cases}\)</p>
<h5 id="5矩阵与行列式">5）矩阵与行列式</h5>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$$ \left(
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right)
,
\left|
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right| $$
</code></pre></div></div>
<p>效果： <br />
\(\left(
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right)
,
\left|
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right|\)</p>
<h4 id="9表格">9、表格</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$$\begin{array}{c|lcr} n & \text{左} & \text{中} & \text{右} \\ \hline 1 & 0.24 & 1 & 125 \\ 2 & -1 & 189 & -8 \\ 3 & -20 & 2000 & 1+10i \\ \end{array}$$
</code></pre></div></div>
<p>效果： <br />
\(\begin{array}{c|lcr} n & \text{左} & \text{中} & \text{右} \\ \hline 1 & 0.24 & 1 & 125 \\ 2 & -1 & 189 & -8 \\ 3 & -20 & 2000 & 1+10i \\ \end{array}\)</p>