MathJax：让web前端支持Latex数学公式

2021.08.15更新：请参考https://github.com/iamwinter/LDUOnlineJudge/blob/master/resources/views/layouts/head.blade.php#L62-L82

---

简介

MathJax是javascirpt和css整合的一个前端拓展包，引用后可以让你的网页自动翻译Latex公式

引入MathJax

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

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

【方式2】：下载mathjax完整包https://github.com/mathjax/MathJax/archive/2.7.7.zip，然后在html页面引入。

<script src="存放路径/MathJax-2.7.7/MathJax.js?config=TeX-AMS_HTML" async></script>

方式2需要注意，该包占用空间比较大，解决方法见文末。

配置MathJax

<script type="text/x-mathjax-config;executed=true">
        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")]);
</script>

成功

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

需要注意配置中inlineMath的$，有些文本中可能在表述美元时用到了$符号，会被MathJax误解，建议将inlineMath的选择符$更改一下，例如\$

可能遇到的问题

1. 使用方式2引入mathjax时，拓展包过大（约34MB）使项目臃肿，如何瘦身？         解决方法：自己写几个公式打开浏览器预览，按下F12，找到sources，左侧包含了该网页使用到的资源，和你本地的mathjax包对比，浏览器sources中没用到的文件夹就可以删掉。这样瘦身后mathjax本地包只剩约1MB。
2. 在浏览器显示公式时，鼠标点击会有蓝色边框，如何取消？        解决方法：自定义css样式

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