在网页中引入MathJax

发表于 更新于 分类于

这篇文章尝试探究如何在页面中引入MathJax以进行公式渲染。

一、示例

一段示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
<p>
对于一元二次方程\(ax^2+bx+c=0\)，在\(a\ne 0\)的情况下，其解为：

$$
x = \frac{-b \pm \sqrt{b^2-4ac} }{2a}
$$

  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>

上述代码的效果如下

对于一元二次方程\(ax^2+bx+c=0\)，在\(a\ne 0\)的情况下，其解为： $$ x = \frac{-b \pm \sqrt{b^2-4ac} }{2a} $$ When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

二、使用方法简介

MathJax是一个开放源代码的JavaScript显示引擎，适用于所有现代浏览器中的LaTeX、MathML和AsciMath表示法。Mathjax的官网见 https://www.mathjax.org 。

要使用MathJax，首先需要引入它：

1
2
3
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>

之后，有两种方式在正文中编写公式。

对于行内公式，使用\(...\) 作为数学公式的标记。一个公式以\(开始，以\)结束。注意这和markdown语法略有不同，markdown语法中，行内公式以$…$进行标记。这种设计的目的是防止和网页内容中的美元符号（$）混淆。

对于行间公式，可以和markdown一样，以$$...$$进行标记，也可以使用\[...\]标记一个行间公式。

MathJax的公式编写语法和\(L^AT_EX\)的公式语法兼容。因此，在两个$$之间，或者在\(和\)之间，直接按照\(L^AT_EX\)语法进行编写就可以了。

另：

如果博客系统是使用hexo搭建的，并不需要这种方法编写公式。hexo自带了MathJax模块，只需要在_config.yml中开启相应的功能即可。