MathJax:在浏览器上显示LaTeX等数学公式的JS引擎

更新时间:2015-04-16 09:44:45点击次数:813次

什么是MathJax


MathJax是一个显示网络上数学公式的开源JavaScript引擎库,它可以在所有浏览器上面工作,其中就支持LaTeX,MathML和AsciiMath 符号,里面的数字会被MathJax使用JavaScript引擎解析成HTML,SVG或者是MathML 方程式,然后在现代的浏览器里面显示。 它的设计目标是利用最新的web技术,构建一个支持math的web平台。支持主要的浏览器和操作系统,包括那些移动设备。 对大部分用户而言它不需要安装,即没有插件需要下载也没有软件需要安装,所以网页作者可以编写包含数学公式的页面并有信心可以自然而容易的浏览到它们。 只需要在页面中包含MathJax脚本和一些数学公式,其他的事情交给MathJax来处理吧。


MathJax使用网络字体(大部分浏览器都支持)去产生高质量的排版,使其在所有分辨率都可缩放和显示,这远比使用包含公式的图片要有效得多。 MathJax也可以用于屏幕阅读器,让视力受损者也可以使用。


使用MathJax显示数学公式是基于文本的,而非图片。它可以被搜索引擎使用,这意味着方程式和页面上的文字一样是可以被搜索的。 MathJax允许页面作者使用TeX、LaTeX符号和 MathML 或者 AsciiMath 去书写公式。 MathJax甚至可以将Tex格式转化为MathML格式,使其可以被原生支持MathML格式的浏览器更多的渲染。转化为MathML格式后你可以复制粘贴它们到其他程序中。


MathJax是模块化的,所以它仅仅在需要时才加载它的组件,同时也可以被扩展以实现更多功能。 MathJax同时也是高度可配置的,允许作者作出更适宜网站自身的自定义。 最重要的,MathJax的API可以让你在你的网页上动态的创建公式。



如何使用


使用MathJax很简单,只需要引入MathJax.js库,然后所有的都交给MathJax处理,我们可以去https://github.com/mathjax/MathJax下载最新版本的MathJax到自己网站,也可以使用MathJax提供的CDN直接使用。本文就简单地使用MathJax提供的CDN来介绍。首先我们引入athJax.js


1 <script type="text/<span id="7_nwp" style="width: auto; height: auto; float: none;"><a id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=11&jk=8b41c1adbe134653&k=javascript&k0=javascript&kdi0=0&luki=9&n=10&p=baidu&q=56075110_cpr&rb=0&rs=1&seller_id=1&sid=534613beadc1418b&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1887734&u=http%3A%2F%2Fwww%2Eiteblog%2Ecom%2Farchives%2F1319&urlid=0" target="_blank" mpid="7" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>"

2  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

3 </script>

  可以通过上面的从MathJax分布式服务器上获取最新的MathJax.js文件。而且加上TeX-AMS-MML_HTMLorMML使得我们可以支持Tex和MathML公式,如果浏览器支持MathML解析,那么就使用它,否则会使用HTML-with-CSS来显示数学公式。而且config=TeX-AMS-MML_HTMLorMML是最常用的,更多的config可以去参加官方文档(http://docs.mathjax.org/en/latest/start.html)。

  下面使用TeX和LaTeX进行说明

   TeX 和 LaTeX 格式的公式使用主要有两种形式,(1)、包含在段落之中的;(2)、独立于其他文字的。TeX 和 LaTeX 格式的默认分隔符是$$...$$和 \[ ...\],这个是独立于其他文字的,其实如果想要在段落之中显示TeX 和 LaTeX 格式的公式使,需要使用\(...\)。比如显示行内公式α+β=γ可以使用:


1 \(\<span id="3_nwp" style="width: auto; height: auto; float: none;"><a id="3_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=11&jk=8b41c1adbe134653&k=alpha&k0=alpha&kdi0=0&luki=6&n=10&p=baidu&q=56075110_cpr&rb=0&rs=1&seller_id=1&sid=534613beadc1418b&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1887734&u=http%3A%2F%2Fwww%2Eiteblog%2Ecom%2Farchives%2F1319&urlid=0" target="_blank" mpid="3" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">alpha</span></a></span>+\<span id="4_nwp" style="width: auto; height: auto; float: none;"><a id="4_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=11&jk=8b41c1adbe134653&k=beta&k0=beta&kdi0=0&luki=3&n=10&p=baidu&q=56075110_cpr&rb=0&rs=1&seller_id=1&sid=534613beadc1418b&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1887734&u=http%3A%2F%2Fwww%2Eiteblog%2Ecom%2Farchives%2F1319&urlid=0" target="_blank" mpid="4" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">beta</span></a></span>=\gamma\)


1 $$\<span id="1_nwp" style="width: auto; height: auto; float: none;"><a id="1_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=11&jk=8b41c1adbe134653&k=alpha&k0=alpha&kdi0=0&luki=6&n=10&p=baidu&q=56075110_cpr&rb=0&rs=1&seller_id=1&sid=534613beadc1418b&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1887734&u=http%3A%2F%2Fwww%2Eiteblog%2Ecom%2Farchives%2F1319&urlid=0" target="_blank" mpid="1" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">alpha</span></a></span>+\<span id="2_nwp" style="width: auto; height: auto; float: none;"><a id="2_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=11&jk=8b41c1adbe134653&k=beta&k0=beta&kdi0=0&luki=3&n=10&p=baidu&q=56075110_cpr&rb=0&rs=1&seller_id=1&sid=534613beadc1418b&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1887734&u=http%3A%2F%2Fwww%2Eiteblog%2Ecom%2Farchives%2F1319&urlid=0" target="_blank" mpid="2" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">beta</span></a></span>=\gamma$$

2 或者

3 \[\alpha+\beta=\gamma\]


转载自过往记忆,本文链接地址: 《MathJax:在浏览器上显示LaTeX等数学公式的JS引擎》(http://www.iteblog.com/archives/1319)

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息