mathjax 动态渲染 typeset问题

使用mathjax渲染数理化公式，静态正常，动态内容出现问题，简单解决如下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      
  <script id="MathJax-script" async
          src="/wwwroot/lib/mathjax/es5/tex-chtml-full.min.js">
  </script>
  <script>
//下面注释这段是罪魁祸首，因为自定义的mathjax覆盖了原库的对象，
//导致动态渲染使用的typesetPromise()或typeset()失效.
//在官方文档示例也有类似的写法，应该只是针对静态页面。
// window.MathJax = {
//     tex: {
//         inlineMath: [['$', '$'], ['\\(', '\\)']]
//     },
//     svg: {
//         fontCache: 'global'
//     }
// };
    setTimeout(() => {
      const e = document.getElementById('target');
      // MathJax.typesetClear();
      e.innerText = '\\(x^2 - y\\)';
      MathJax.typesetPromise();
    }, 2000);
  </script>
</head>
<body>
  <p id="target">\(a^2+b\)</p>
</body>
</html>

　　

posted @ 2024-12-21 11:42  sun51586  阅读(498)  评论(0)    收藏  举报