MathJax的使用
Posted xunhanliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MathJax的使用相关的知识，希望对你有一定的参考价值。
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}.$$ 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语法，可能显示就会出错。
以上是关于MathJax的使用的主要内容，如果未能解决你的问题，请参考以下文章