MathJax：讓web前端支持Latex數學公式

簡介

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;
   }