如何使用 MathML 在网页中表示数学公式

在网页开发中，除了使用 HTML 创建文本内容，还能使用 SVG 创建矢量图标，比如 Lucide 图标库。另外，还有一个比较小众的 MathML，可以用来创建数学公式。

MathML 和 SVG 一样，也是基于 XML 的标记语言。用起来也很简单，SVG 的领地用 <svg> 划分，MathML 的领地使用 <math> 标签。

在<math>标签内，<mn> 表示数值字面量，<mo> 表示操作符。因此，1+1=2 用 MathML 表示，是这样的：

<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>1</mn>
  <mo>=</mo>
  <mn>2</mn>
</math>

渲染结果如下：

数学公式中会有分数（fraction），在 MathML 中使用<mfrac>表示分数，它有两个子元素，第一个表示分子，第二个表示分母。

<math>
  <mfrac>
    <mn>1</mn>
    <mn>3</mn>
  </mfrac>
</math>

渲染结果如下：

现在，我们可以进行简单的分数运算了：

<p>
  分数的加法：
  <math>
    <mfrac>
      <mn>2</mn>
      <mn>3</mn>
    </mfrac>
    <mo>+</mo>
    <mfrac>
      <mn>2</mn>
      <mn>3</mn>
    </mfrac>
    <mo>=</mo>
    <mfrac>
      <mn>4</mn>
      <mn>3</mn>
    </mfrac>
  </math>
  看上去不难。
</p>

渲染结果如下：

数学公式默认是行内样式，修改<math>的属性 display 为 “block” 可以把它改成块级元素（单独占据一行，并且水平居中显示）。

<p>
  分数的加法：
  <math display="block">
    <mfrac>
      <mn>2</mn>
      <mn>3</mn>
    </mfrac>
    <mo>+</mo>
    <mfrac>
      <mn>2</mn>
      <mn>3</mn>
    </mfrac>
    <mo>=</mo>
    <mfrac>
      <mn>4</mn>
      <mn>3</mn>
    </mfrac>
  </math>
  看上去不难。
</p>

渲染结果如下：

<mfrac>的直接子元素只能有两个，如果分子或者分母有多个元素，可以使用<mrow>把它们打包到一起。

<math display="block">
  <mfrac>
    <mrow>
      <mn>2</mn>
      <mo>+</mo>
      <mn>3</mn>
    </mrow>
    <mn>5</mn>
  </mfrac>
</math>

渲染结果如下：

在 MathML 中，使用<mi>表示变量名。

<math display="block">
  <mi>x</mi>
  <mo>+</mo>
  <mi>y</mi>
  <mo>=</mo>
  <mi>z</mi>
</math>

渲染结果如下：

指数运算使用<msup>表示。

<math display="block">
  <msup>
    <mi>x</mi>
    <mn>3</mn>
  </msup>
</math>

渲染结果如下：

勾股定理可以写成这样：

<math display="block">
  <msup>
    <mi>a</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <msup>
    <mi>b</mi>
    <mn>2</mn>
  </msup>
  <mo>=</mo>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

渲染结果如下：

平方根使用<msqrt>表示。

<math display="block">
  <msqrt>
    <mn>2</mn>
  </msqrt>
</math>

渲染结果如下：

更高次方的根使用 <mroot> 表示。

<math display="block">
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>

渲染结果如下：

在数学公式中，会有一些不好输入的特殊字符，比如 Delta（三角形）或正负号。此时，可以使用 HTML 实体编码来表示。

<p>  Delta 的符号是 &#x394; ，正负号的符号是 &PlusMinus; 。</p>

渲染结果如下：

有了这些基础，二元一次方程的求根公式可以表示成这样：

<p>
  二元一次方程
  <math>
    <mi>a</mi>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>b</mi>
    <mi>x</mi>
    <mo>+</mo>
    <mi>c</mi>
    <mo>=</mo>
    <mn>0</mn>
  </math>
  的求根公式是：
  <math display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>&#x2212;</mo>
        <mi>b</mi>
        <mo>&PlusMinus;</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mi>a</mi>
            <mi>c</mi> 
         </mrow>
        </msqrt>
      </mrow>
      <mrow> 
       <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </math>
</p>

渲染结果如下：

MathML 的优势是浏览器原生支持，无需安装依赖，有手就能写，写了就能渲染。缺点是写起来麻烦，读起来累，而且稍微有一点儿丑。

手写 MathML 适合简单公式，一旦公式变得复杂，编写和维护成本都会增加。

此时，推荐使用 MathJax 或 KaTeX 等专业数学公式排版引擎，这些引擎使用 LaTeX 语法，好读好写好看，代价是引入一点儿依赖。

以上关于如何使用 MathML 在网页中表示数学公式的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。