1. 文章
  2. 文章详情

html数学公式显示库MathJax的使用

MathJax是一个开源的web数学公式渲染器,由JS编写而成。MathJax允许你在你的网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被javascript处理为HTML、SVG或者MathML符号。

引入CDN
只需要在头部添加下面这句,就可以成功引入CDN

<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>


内联config说明
官方提供了一个能让我们内联一个配置选项的功能,要想让这个内联配置生效就得放在
CDN引入之前。如下

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //关闭js加载过程信息
messageStyle: "none", //不显示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a']
},
'HTML-CSS': {
showMathMenu: false //禁用右键菜单
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

其中MathJax.Hub.Config()里的配置选项是重点,本例表示以$来识别行内公式,$$来识别行间公式

书写公式

对应的公式在html文件中写法如下

<body>
${x}^{(2)}\text{=}\begin{bmatrix} 1416\\\ 3\\\ 2\\\ 40 \end{bmatrix}$
</body>

显示效果



发表评论

登录后才能评论

评论列表(0条)