1. 程式人生 > >五分鐘上手MAthJax

五分鐘上手MAthJax

數學 有時 onf demo ctype title 渲染 queue cdn

最近在研究,在頁面中顯示一些數學公式。搞得我很頭疼。 據說MathJax會統一這已領域。所以去學了學。網上教程特別多。繁雜。 說的清楚的特別少。

我是這麽跑通的,:

1.在官網下載代碼地址為:https://www.mathjax.org/

2.然後找到這個東西,下載源碼。解壓。不要動裏面的配置文件。

技術分享

3.解壓後的文件是這個樣子。

技術分享

4.別動文件。全部放到文件中,引入MathJax.js就可以了。

這是一個小得demo 全碼。粘貼進去就能用,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MathJax AsciiMath Test Page</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [[‘$‘,‘$‘], [‘\(‘,‘\)‘]]}
});
</script>
</head>
<body>
<div id="pop">
$$\frac{1}{2}$$
</div>

</body>
</html>

這個插件有點大,或者這樣子:

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

這兩船代碼放到body底部就可以了。

!!!ps:還有一條。有時候你的數學代碼是動態的,動態代碼加載到頁面上。MAthJax是不會重新渲染的。解決辦法是:

在加載事件後加入這段代碼。MathJax.Hub.Queue(["Typeset", MathJax.Hub]);(翻譯成中文就是:重新渲染。)。

然後,就成功的用了MathJax啦。

五分鐘上手MAthJax