通过MathJax.js库实现前端Web支持LaTeX数学公式

如果你想在前端浏览器上编辑并显示数学公式,JavaScript库MathJax.js是一个很好的选择。

LaTeX语法简介

关于Latex语法这里不做过多介绍,具体查看百科词条LaTeX。这里只说下LaTeX语法的数学公式部分,LaTeX语法使用不同的英文、下划线、括号等字符表示数学公式的不同部分,比如\frac{12}{13}表示12除以13,比如\begin{bmatrix}1&0\\0&1\end{bmatrix}表示一个2x2的单位矩阵,比如\int f(x)dx表示一个积分公式...

如果你有兴趣可以去学习下Latex与数学公相关的语法,不过就我个人而言并没有去学习记忆这些语法,我一般会通过一些可视化编辑器编写数学公式,然后导出LaTex格式的数学公式文本,插入到我的博客文章中,然后通过相关js库在web页面上渲染出来公式。

能够可视化编辑数学公式并导出Latex语法公式的应用比较多,这里我推荐一个在线工具MathType,该工具可以可视化编辑数学公式,编辑好后可以导出Latex语法的公式。

MathJax.js解析渲染LaTex数学公式

相关链接:MathJax官网MathJax 中文文档

通过MathJax.js库可以把Latex语法表示的数学公式渲染在前端Web页面上。

创建一个.html文件,通过CDN方式引入MathJax.js库,直接通过html元素插入latex语法公式就可以解析渲染出来公式效果。

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

如果国外CDN链接网速不好,也可以使用国内CDN连接。

  <script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

你可以直接把下面代码复制到.HTML文件中测试一个渲染效果。把Latex语法数学公式放在符号$$$$之间,是为了辅助MathJax.js识别哪一段是Latex公式字符串,默认情况下,MathJax.js通过HTML5 MathML相关HTML元素把数学公式渲染出来,替换掉掉原来Latex公式文本,你可F12查看浏览器的渲染结果。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
  <p>$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$</p>
  <p>$$\begin{bmatrix}1&0\\0&1\end{bmatrix}$$</p>
  <p>$$E=mc^2$$</p>
</body>
</html>

MathJax.Hub.Config配置语法规则

Latex公式放在符号$$$$之间,MathJax.js解析的时候公式单独占据一行,如果你希望公式和文字内容在同一行,可以把Latex公式放在符号$$之间。

MathJax默认没有开启公式与文字同行显示,需要通过代码设置。

  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
    });
   </script>

MathJax动态数学公式

如果LaTex数学公式是动态输入的,在输入的同时需要调用MathJax方法MathJax.Hub.Queue()重新解析渲染LaTex数学公式。

MathJax.Hub.Queue(["Typeset", MathJax.Hub])

默认情况下,MathJax.Hub.Queue()方法会遍历整个html文档查询LaTex公式,不过也可以通过元素id属性设置MathJax解析范围。

博客支持编辑显示数学公式

如果搭建自己个人博客,需要编辑数学公式,可以通过Word等公式软件编辑好导出公式图片,如果你不想这样编辑博客文章公式,也可以直接让你的博客支持数学公式编辑和显示功能,比如markdown语法编写文章的时候,可以通过Latex语法输入数学公式的字符串,然后通过JavaScript库MathJax.js解析渲染Latex语法的数学公式。

我目前的方案是通过一些可视化的数学公式编辑器编辑公式,编辑好公式以后,导出Latex语法公式文本,然后公式文章插入到Markdown文章中,最后前端通过MathJax.js解析渲染Latex语法字符串。

当然了如果你有精力,也可以自己实现一个可视化数学公示编辑器作为博客后台插件,然后按照LaTex语法存储数学公式,前端页面公式通过MathJax.js库解析渲染。