使用mathjax渲染数理化公式,静态正常,动态内容出现问题,简单解决如下。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><script id="MathJax-script" asyncsrc="/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>