使用JavaScript的Mathjax插件无法识别内联数学表达式

如何解决使用JavaScript的Mathjax插件无法识别内联数学表达式

这是我实现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>

这是我的代码，用于向html中添加另一个数学表达式

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>

我应该怎么做才能使动态打印的html标签正确显示？谢谢。

解决方法

尝试稍微更改您的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}$');

演示-https://codepen.io/vyspiansky/pen/yLOVeMe?editors=1010