WEB 页面嵌入公式的方法

标签（空格分隔）： WEB

---

MathJax 简介

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用 MathJax 可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax 可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。

MathJax 下载

下载地址

引入 MathJax

MathJax 配置

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'], //避开某些标签
        ignoreClass:"comment-content" //避开含该Class的标签
    },
    "HTML-CSS": {
        availableFonts: ["STIX","TeX"], //可选字体
        showMathMenu: false //关闭右击菜单显示
        

    },
    menuSettings: {
        inTabOrder: false,//取消Tab建
        // zoom: "Click",//点击放大


    },
   

});

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

识别公式

例如：

例子一

\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{122}} \
& = \sqrt{\frac{73^2}{122}\cdot\frac{73^2-1}{732}} \
& = \sqrt{\frac{73^2}{122}}\sqrt{\frac{73^2-1}{732}} \
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}

\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ 
 & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ 
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}

例子二

$(ax^2 + bx + c = 0)$

(ax^2 + bx + c = 0)

例子三(建议使用)

行内使用不用写 display 单独居中显示使用display="block"

$$x=\frac{-<!--\; -\; -->b\pm <!--\; \pm \; -->\sqrt{b^2-<!--\; -\; -->4ac}}{2a}$$

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

辅助工具

• MathType
• Web Equation – 在线手绘数学公式

小窍门

math 标签可以通过 生成工具导出
复制到到 HTML 页面中
安装了 MathType 的同学，可以双击 world 里的弹出，MathType 的窗口。

MathType 设置

cmd-markdown-logo

参考资料

https://www.mathjax.org/
https://segmentfault.com/a/1190000008317350