浏览器显示javascript-MathJax：让Web后端支持Latex物理公式

更新于2021年8月15日：请参考

介绍

MathJax是一个集成了javascript和css的后端扩展包。 引用后，您可以在网页上手动翻译 Latex 公式。

MathJax 简介

【方法一】：在需要显示latex公式的HTML页面直接引用cdn

【方法二】：下载完整的mathjax包，然后在html页面引入。

方法2需要注意的是浏览器显示javascript，这个包占用空间很大。 解决方法见文章末尾。

配置 MathJax

        window.MathJax.Hub.Config({
            showProcessingMessages: false, //关闭js加载过程信息
            messageStyle: "none", //不显示信息
            jax: ["input/TeX", "output/HTML-CSS"],
            tex2jax: {
                inlineMath: [["$", "$"], ["\(", "\)"]], //行内公式选择符
                displayMath: [["$$", "$$"], ["\[", "\]"]], //段内公式选择符
                skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
            },
            "HTML-CSS": {
                availableFonts: ["STIX", "TeX"], //可选字体
                showMathMenu: false //关闭右击菜单显示
            }
        });
        //下面第三个参数可以不写，默认对整个html内的latex进行翻译
        window.MathJax.Hub.Queue(["Typeset", MathJax.Hub,document.getElementsByClassName("ck-content")]);

成功

打开网页可以看到latex公式显示正常。

需要注意配置中inlineMath中的$。 有些文本在描述欧元时可能会使用 $ 符号，这会被 MathJax 误解。 建议更改inlineMath中的选择器$，如$

您可能遇到的问题使用方法2引入mathjax时，扩展包太大（约34MB），项目臃肿。 如何减肥？ 解决方案：自己写几个公式，打开浏览器预览，按F12，找到sources，左边是网页用到的资源，和你本地的mathjax包对比一下，浏览器sources里没用的文件夹可以删除。 经过这次瘦身之后，mathjax 本地包只有 1MB 左右。 浏览器显示公式时浏览器显示javascript，点击鼠标时出现黑色边框。 怎么取消？解决方案：自定义css样式

.MathJax {
    outline: 0 !important;
}
.MathJax_Display {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}