在网页中显示数学公式

2019年5月22日23:57:30 评论 516

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

在网页中显示数学公式

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

存储数学公式

1.Latex

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

Latex 实例:

显示结果为:

在网页中显示数学公式

2.MathML

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

MathML 实例:

FireFox 下显示结果为:

在网页中显示数学公式

3.ASCIIMathML

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

ASCIIMathML 实例:

FireFox 下显示结果为:

在网页中显示数学公式

展示数学公式

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 即可,代码如下:

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

2. Katex

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

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

weinxin
关于本站
本站是一个分享建站经验、网站优化以及互联网技巧的个人博客。
  • 版权声明: 发表于 2019年5月22日23:57:30
  • 转载注明:https://www.pieruo.com/8825.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: