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>
注意：
- 頁面中的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語法，可能顯示就會出錯。