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

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

什么是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)

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!