在网页中显示数学公式

WEB评论1,045字数 3462阅读模式

在一些理科性质的网站上, 往往会涉及数学公式的输入和显示,在Word中,我们可以利用 MathType 公式编辑器很容易地去编写数学公式,然而,这在 Web 中却一直是一个难题。随着互联网的普及,使用 Web 技术,我们可以非常方便地将内容推广。今天,我们就来总结一下 Web 中展现数学公式的一些可行技术。

在网页中显示数学公式-图片1

在 Web 系统中,可以使用 Latex 语法存储数学公式,像 $a^2+b^2=c^2$ 这样,展示的时候使用 MathJax 或者 KaTex 进行 JS 渲染即可。至于 MathML 和 ASCIIMathML,由于兼容性不好,不推荐使用。

存储数学公式

1.Latex

LaTeX 基于 TeX,主要目的是为了方便排版,是当今世界上最流行和使用最为广泛的TeX格式。使用LaTeX基本上不需要使用者自己设计命令和宏等,因为LaTeX已经替你做好了。因此,即使使用者并不是很了解TeX,也可以在短短的时间内生成高质量的文档。对于生成复杂的数学公式,LaTeX表现的更为出色。在学术界的论文,尤其是数学、计算机等学科论文都是由 LaTeX 编写, 因为用它写数学公式非常方便。

Latex 实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用MathJax显示LaTex实例</title>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
                }
            });
        </script>
        <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    </head>
    <body>
        $a^2+b^2=c^2$
    </body>
</html> 

显示结果为:

在网页中显示数学公式-图片2

2.MathML

MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。

MathML 实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MathML实例</title>
    </head>
    <body>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <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>
            </mrow>
        </math>
    </body>
</html> 

FireFox 下显示结果为:

在网页中显示数学公式-图片3

3.ASCIIMathML

ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。您只要遵循简单的语法,用普通的ASCII字母和符号,就可以在网页上输入并显示出漂亮的数学公式。这些公式遵循W3C标准,同样,目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。公式的开头和结尾必须以 $ 或 ` 为标记,语法跟 LaTex 语法很像似,二者彼此兼容。

ASCIIMathML 实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ASCIIMathML 实例</title>
        <script type="text/javascript" src="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js"></script>
    </head>
    <body>
        `a^2+b^2=c^2`
    </body>
</html> 

FireFox 下显示结果为:

在网页中显示数学公式-图片4

展示数学公式

1.MathJax

MathJax是一个显示网络上数学公式的开源JavaScript引擎库,支持LaTeX,MathML和AsciiMath标记语言,允许你在网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被JavaScript处理为HTML+CSS、SVG或者MathML符号。支持服务器端渲染,渲染过程是一个异步执行的队列。其优点是对数学公式的渲染支持度很高,缺点是生成公式的速度较慢。

2.MathML

MathML 是由国际互联网协会(W3C)于1997制定的一种基于XML(标准通用标记语言的子集)标准的数学标记语言,其优点是渲染速度快,可以像书写Html那样书写数学公式,缺点是对浏览器的兼容差,目前只有FireFox和部分webkit内核的浏览器(Safari、Opera)兼容MathML,Chrome和IE不兼容MathML,另外,用MathML语法书写过于繁琐冗长,这也许是它难以被推广的原因吧。

3.KaTex

KaTeX 是一个易于使用,号称“最快”的数学公式渲染库,是后起之秀,可汗学院的公式渲染方案。支持服务端渲染,例如服务器端使用Node.js程序调用KATEX,把渲染好的HTML片段直接发送给客户端。KaTeX支持所有主流的浏览器,其优点是并发渲染,渲染速度快。KaTex 由于发展比较晚,大约 2013 年,对 LaTex 语法的支持程度可能不如 MathJax,比如不支持中文。

使用示例

1. MathJax

MathJax调用非常方便,只需要在需要展示数学公式的页面加载 MathJax 的 js 即可,代码如下:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
        }
    });
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>

引入上述js就可以自动渲染数学公式。

2. Katex

使用官方自带的 CDN 的配置。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

上面,该defer属性 表示在页面加载之前不需要执行脚本,从而加快了页面呈现速度,通过onload属性调用 renderMathInElement 一次自动渲染脚本内容。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

WEB最后更新:2020-3-8
夏日阳光
  • 本文由 夏日阳光 发表于 2019年5月22日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/63.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证