你会在网页上写数学公式吗?

发布时间:2019-02-22 作者:一点通


如何在网页中显示数学公式?想必有部分同学遇到过类似的需求,不过要解决这个需求却不是件容易的事。但你可能不知道的是,有一组专门的HTML5标签来解决这个问题

MathML是一门基于XML的数学标记语言,用来在互联网上展示数学符号和公式。可以在HTML5网页中使用相关的标签,根标签是<math>

举个简单的例子,a平方+b平方=c平方,在HTML中可以通过下面的标签来实现

<math>
    <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>

整个表达式必须包含在<math>标签中,其中a平方的元素为

<msup>
    <mi>a</mi>
    <mn>2</mn>
</msup>

这里<msup>元素用来为表达式加上标,<mi><mn>分别展示一个标识符和数字字面量。

兼容性

比较遗憾的是,目前只有Firefox和Safari支持MathML(Chrome竟然不支持?),但是我们可以通过MathJax这个开源库来实现在几乎所有浏览器上支持MathML.

用法非常简单,只需要引入它的JavaScript文件即可:

<script type="text/javascript" src="MathJax.js?config=MML_HTMLorMML"></script>
<math>
...
</math>

注意,别忘了这里的?config=MML_HTMLorMML,然后就可以在我们的Chrome和IE上运行了。

那么为什么主流的Chrome不支持MathML呢?其实主要是考虑到它的性能不太好,存在安全性问题,而且这样的需求也不多,所以更适合使用MathJax这样的框架来解决,而不是整个浏览器平台对它的支持

但是不管怎样,有类似的需求我们就可以通过MathML相关的HTML5标签加MathJax来解决

demo