MathJax官网

文档： https://docs.mathjax.org/en/latest/index.html

官网例子（稍加修改）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax v3 with interactive TeX input and HTML output</title>

    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']]
            },
            svg: {
                fontCache: 'global'
            },
            startup: {
                ready: () => {
                    MathJax.startup.defaultReady();
                    MathJax.startup.promise.then(() => {
                        console.log('MathJax 在页面中的转换已经完成，可以进行后序的页面指令解析了');
                    });
                }
            }
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

    <script>

        function convert() {
            //
            //  Get the TeX input
            //
            var input = document.getElementById("input").value.trim();
            //
            //  Disable the display and render buttons until MathJax is done
            //
            var display = document.getElementById("display");
            var button = document.getElementById("render");
            button.disabled = display.disabled = true;
            //
            //  Clear the old output
            //
            output = document.getElementById('output');
            output.innerHTML = '';
            //
            //  Reset the tex labels (and automatic equation numbers, though there aren't any here).
            //  Get the conversion options (metrics and display settings)
            //  Convert the input to CommonHTML output and use a promise to wait for it to be ready
            //    (in case an extension needs to be loaded dynamically).
            //
            MathJax.texReset();
            var options = MathJax.getMetricsFor(output);
            options.display = display.checked;   //用于是否是居中（block）显示,非居中的时候是inline
            MathJax.tex2chtmlPromise(input, options).then(function (node) {
                //
                //  The promise returns the typeset node, which we add to the output
                //  Then update the document to include the adjusted CSS for the
                //    content of the new equation.
                //
                output.appendChild(node);
                MathJax.startup.document.clear();
                MathJax.startup.document.updateDocument();
            }).catch(function (err) {
                //
                //  If there was an error, put the message into the output instead
                //
                output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
            }).then(function () {
                //
                //  Error or not, re-enable the display and render buttons
                //
                button.disabled = display.disabled = false;
            });
        }
    </script>
    <style>
        #frame {
            max-width: 40em;
            margin: auto;
        }

        #input {
            border: 1px solid grey;
            margin: 0 0 .25em;
            width: 100%;
            font-size: 120%;
            box-sizing: border-box;
        }

        #output {
            font-size: 120%;
            margin-top: .75em;
            border: 1px solid grey;
            padding: .25em;
            min-height: 2em;
        }

        #output>pre {
            margin-left: 5px;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    \p\s\sqrt\$
    <div id="frame">

        <h1>MathJax v3: TeX to HTML</h1>

        <textarea id="input" rows="15" cols="10">
%
% Enter TeX commands below
%
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
</textarea>
        <br />
        <div class="left">
            <input type="checkbox" id="display" checked onchange="convert()"> <label for="display">Display style</label>
        </div>
        <div class="right">
            <input type="button" value="Render TeX" id="render" onclick="convert()" />
        </div>
        <br clear="all" />
        <div id="output"></div>
    </div>

</body>

</html>

View Code

注意：

页面中的tex公式一定会被自动转换。只要你写成\$...\$形式的，都会被识别成公式。如果想不使用mathjax转化的，要把公式前后的\$去掉。

mathjax渲染与window.onready的执行的顺序无法确定。一般我们可以在mathjax渲染完成再做的一些事情,可以在写成例子中的样子：在MathJax中添加startup.

startup: {
                ready: () => {
                    MathJax.startup.defaultReady();
                    MathJax.startup.promise.then(() => {
                        console.log('MathJax 在页面中的转换已经完成，可以进行后续的页面指令解析了');
                    });
                }
            }

一旦你引入了tex-chtml.js文件，同一个p标签内使用了tex公式和与公式无关的\$（请对在此符号前加一个转义符号\）符号的话，请对在此符号前加一个转义符号，否则，也会被认为是Tex语法，可能显示就会出错。

MathJax的使用

MathJax官网

官网例子（稍加修改）：

注意：

推荐阅读