用MathJax排版/渲染动态内容

Question

我用MathJax来显示数学，equations.It在静态写的数学中工作得很好。但不适合动态增加的数学。

这是我的密码

<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>

我用两个跨度元素写过数学。第一个是静态声明的，第二个是在文档就绪函数中动态添加的。

请帮我解决这个问题。

Answer 1

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 = '   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

您需要告诉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>

//Static
<div>
  <span>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span> 
</div>
//Dynamic
<div id="dynamic-pan"></div>

​

有关更多信息，请参阅本文件

编辑:字符\在字符串上有一个特殊的含义(它转义了下面的字符)以避免这种行为，确保使用\\使其出现在最终字符串中