问题描述
这是我实现Mathjax的代码。
<head>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$']] },elements: ['math']
});
</script>
</head>
function dumpElement(blockIdentifier,questionNumber,data){
document.getElementById(blockIdentifier).innerHTML += `<p style= "float:left; left:0%;">` + (questionNumber + ')') + `</p>
<p id = "math">` + data + `</p> <br><br><br><br>`;
}
最初加载页面并调用此函数后,我无法正确显示“数据”(乳胶编码的字符串)。例如,这是我使用inspect元素复制的元素。
<p id="math">$\frac{37}{40}$</p>
更有趣的是,以下html标记是静态键入到html中的(也就是说,它将在函数dumpElement()之前显示)并正确显示!
<p id="math">$-\frac{2}{3}$</p>
解决方法
尝试稍微更改您的MathJax配置选项。也许tex2jax
就足够了:
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$']] }
});
</script>
如果需要,请为元素使用唯一的ID:
<p id="math-1">$\frac{37}{40}$</p>
<p id="math-2">$1-\frac{2}{3}$</p>
<div id="some-unique-id">Some text...</div>
我也将尝试更改JavaScrtipt代码:
function dumpElement(blockIdentifier,questionNumber,data) {
const wrapperElement = document.getElementById(blockIdentifier);
let htmlText = `<p style="float: left; left: 0%;">${questionNumber})</p>`;
htmlText += `<p id="math-{questionNumber}">${data}</p><br><br><br><br>`;
wrapperElement.innerHTML += htmlText;
}
dumpElement('some-unique-id','3','$4^2-\\frac{37}{40}$');