使用MathJax排版/渲染动态内容 [英] Typeset/render dynamic content with MathJax
问题描述
我使用MathJax来显示数学方程式，在静态编写的数学中运行良好.但不适用于动态添加的数学.
这是我的代码
< body>//静止的< div>< span> \(x = {-b \ pm \ sqrt {b ^ 2-4ac} \ over 2a} \)</span></div>//动态的< div id ="dynamic-pan"></div>< script type ="text/javascript" src ="js/jquery.js"></script>< script type ="text/javascript" src ="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"</script>< script type ="text/javascript">$(document).ready(function(){$('#dynamic-pan').empty();$('#dynamic-pan').append('< span> \(x = {-b \ pm \ sqrt {b ^ 2-4ac} \ over 2a} \)</span>');});</script></body> 我用两个span元素写过数学.第一个是静态声明的，第二个是动态添加到文档就绪函数中的
请帮助我解决问题.
MathJax v3
http://docs.mathjax.org/en/latest/web/typeset.html
- 同步排版:
MathJax.typeset() - 异步排版:
MathJax.typesetPromise()
setTimeout(function(){const content = document.createElement('span')content.textContent ='\\(x = {-b \\ pm \\ sqrt {b ^ 2-4ac} \\ over 2a} \\)'const done = document.createElement('span')done.textContent ='完成！'const syncTypeset = document.querySelector('#syncTypeset')syncTypeset.appendChild(content.cloneNode(true))setTimeout(function(){MathJax.typeset()syncTypeset.appendChild(done.cloneNode(true))}，3000)const asyncTypeset = document.querySelector('#asyncTypeset')asyncTypeset.appendChild(content.cloneNode(true))setTimeout(异步函数(){等待MathJax.typesetPromise()asyncTypeset.appendChild(done.cloneNode(true))}，3000)}，0) < script>MathJax = {特克斯:{inlineMath:[['$'，'$']，['\\('，'\\)']]}，svg:{fontCache:'global'}};</script>< script src ="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id ="MathJax-script"></script>//静止的< div>< span> \(x = {-b \ pm \ sqrt {b ^ 2-4ac} \ over 2a} \)</span></div>//动态的< div id ="syncTypeset"> 3秒后同步:</div>< div id ="asyncTypeset"> 3秒后异步:</div> MathJax v2
您需要告诉MathJax使用 Typeset()方法完成的未处理数学运算，因为MathJax可能在调用 Typeset()时正在运行您需要将其添加到其队列中
$(document).ready(function(){var $ el = $('#dynamic-pan')$ el.empty()$ el.append('< span> \\(x = {-b \\ pm \\ sqrt {b ^ 2-4ac} \\ over 2a} \\)</span>'))MathJax.Hub.Queue(['Typeset'，MathJax.Hub，$ el [0]]);}); < script src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>< script type ="text/javascript" src ="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"</script>//静止的< div>< span> \(x = {-b \ pm \ sqrt {b ^ 2-4ac} \ over 2a} \)</span></div>//动态的< div id ="dynamic-pan"></div> 有关更多信息，请参考本文档 >
字符 \ 在字符串上具有特殊含义(转义以下字符)，以避免此行为，请确保使用 \\ 使其出现在字符串中最后的字符串
I used MathJax for displaying mathematics equations.It is working fine in statically written mathematics. But not working for dynamically added mathematics.
Here is my code
<body>
//Static
<div>
<span>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>
</div>
//Dynamic
<div id="dynamic-pan">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#dynamic-pan').empty();
$('#dynamic-pan').append('<span>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>');
});
</script>
</body>
I have written mathematics in two span element. First one is statically declared and second one is dynamically added in document ready function
Please help me to resolve the issue.
MathJax v3
http://docs.mathjax.org/en/latest/web/typeset.html
- Sync typeset:
MathJax.typeset() - Async typeset:
MathJax.typesetPromise()
setTimeout(function () {
const content = document.createElement('span')
content.textContent = '\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)'
const done = document.createElement('span')
done.textContent = ' done!'
const syncTypeset = document.querySelector('#syncTypeset')
syncTypeset.appendChild(content.cloneNode(true))
setTimeout(function () {
MathJax.typeset()
syncTypeset.appendChild(done.cloneNode(true))
}, 3000)
const asyncTypeset = document.querySelector('#asyncTypeset')
asyncTypeset.appendChild(content.cloneNode(true))
setTimeout(async function () {
await MathJax.typesetPromise()
asyncTypeset.appendChild(done.cloneNode(true))
}, 3000)
}, 0)
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
//Static
<div>
<span>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>
</div>
//Dynamic
<div id="syncTypeset">Sync after 3 second: </div>
<div id="asyncTypeset">Async after 3 seconds: </div>
MathJax v2
You need to tell MathJax to look for unprocessed math which is done with the Typeset() method, since MathJax may be operating at the time of the call to Typeset() you need to add it to its queue
$(document).ready(function() {
var $el = $('#dynamic-pan')
$el.empty()
$el.append('<span>\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</span>')
MathJax.Hub.Queue(['Typeset', MathJax.Hub, $el[0]]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
//Static
<div>
<span>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>
</div>
//Dynamic
<div id="dynamic-pan"></div>
Refer to this document for more information
Edit: the character \ has a special meaning on strings (it escapes the following char) to avoid this behavior make sure you use \\ for it to appear in the final string
这篇关于使用MathJax排版/渲染动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
