什么是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)
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。