¿Cómo cambio dinámicamente la cadena matemática de un elemento matemático particular de MathJax (v3.2.0) y actualizo su representación?
El siguiente enfoque parece funcionar, pero se siente de un nivel demasiado bajo. Me preocupa que haya errores con este enfoque, o que exista una mejor manera.
(async() => { await MathJax.typesetPromise(); const mathDiv = document.getElementById('math'); const [mathItem] = MathJax.startup.document.getMathItemsWithin(mathDiv); const mathStrings = [ 'e^{jx} = \\cos x + j \\sin x', '\\hat{f}(\\omega) \\stackrel{\\mathrm{def}}{=} \\frac{1}{\\sqrt{2\\pi}} \\int_{-\\infty}^{\\infty} f(t)e^{-j\\omega t} dt', ]; for (let i = 1; true; ++i) { await new Promise((resolve) => setTimeout(resolve, 2000)); mathItem.reset(); mathItem.math = mathStrings[i % mathStrings.length]; mathItem.render(MathJax.startup.document); document.getElementById('intro').textContent = `After update #${i}:`; } })(); <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> <span id="intro">Before update:</span><div id="math">\[\text{placeholder}\]</div>Diría que la documentación es bastante clara aquí: https://docs.mathjax.org/en/latest/web/typeset.html#updating-previously-typeset-content
Para la solución más simple posible y más concisa, vaya con:
const mathDiv = document.getElementById('math'); await MathJax.startup.promise // make sure initial typesetting has taken place MathJax.typesetClear([mathDiv]) // clear MathJax awareness of this element await MathJax.typesetPromise([mathDiv]) // typeset anew Cambie await por manejo de estilo Promise si lo desea y agregue try , catch según lo desee para manejar los errores.