MathJax的使用

Posted xunhanliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MathJax的使用相关的知识,希望对你有一定的参考价值。

MathJax官网

 官网: https://www.mathjax.org/

 文档: 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}.$$
    pssqrt$
    <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

注意:

  1. 页面中的tex公式一定会被自动转换。只要你写成$...$形式的,都会被识别成公式。如果想不使用mathjax转化的,要把公式前后的$去掉。
  2. mathjax渲染与window.onready的执行的顺序无法确定。一般我们可以在mathjax渲染完成再做的一些事情,可以在写成例子中的样子:在MathJax中添加startup.
    startup: {
                    ready: () => {
                        MathJax.startup.defaultReady();
                        MathJax.startup.promise.then(() => {
                            console.log(‘MathJax 在页面中的转换已经完成,可以进行后续的页面指令解析了‘);
                        });
                    }
                }
  3. 一旦你引入了tex-chtml.js文件,同一个p标签内使用了tex公式和与公式无关的$(请对在此符号前加一个转义符号)符号的话,请对在此符号前加一个转义符号,否则,也会被认为是Tex语法,可能显示就会出错。

以上是关于MathJax的使用的主要内容,如果未能解决你的问题,请参考以下文章

五分钟上手MAthJax

MathJax基本的使用方式

MathJax的使用

如何使用 selenium 记录 mathjax 加载时间

MathJax 类型设置

Mathjax公式教程