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- 40em;
margin: auto;
}
#input {
border: 1px solid grey;
margin: 0 0 .25em;
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>
注意：
- 页面中的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语法，可能显示就会出错。