使用 MathJax 排版/渲染动态内容

Question

使用 MathJax 排版/渲染动态内容

我使用 MathJax 来显示数学方程。它在静态编写的数学中运行良好。但不适用于动态添加的数学。

这是我的代码

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

Run Code Online (Sandbox Code Playgroud)

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

请帮我解决这个问题。

Answer 1

Mau*_*ppe 7

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)

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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]]);
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

有关更多信息，请参阅此文档

编辑：该字符\在字符串上具有特殊含义（它转义以下字符）以避免这种行为，请确保使用\\它出现在最终字符串中

归档时间：	9 年，8 月前
查看次数：	3312 次
最近记录：	5 年，8 月前