Mathjax is not rendering when used within a popup

4 hours ago 2

ARTICLE AD BOX

I have below HTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Math Popup Test</title>  <script> window.MathJax = { tex: { inlineMath: [['\$','\$']], displayMath: [['\\[','\\]']] } }; </script>  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> body{ font-family:serif; padding:40px; } button{ font-size:16px; padding:10px 20px; } #overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; } #popup{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:60vw; height:60vh; background:#eee; border:3px solid gold; display:none; padding:20px; overflow:auto; } .math-block{ font-size:18px; line-height:1.6; } mjx-container[jax="CHTML"][display="true"]{ text-align:left !important; margin-left:0 !important; } </style> </head> <body> <button onclick="openPopup()">Open Example</button> <div id="overlay"></div> <div id="popup"> <div id="popupContent"></div> </div> <script> /* popup content */ const htmlContent = ` <div class="math-block"> <span>\$begin:math:text$ \\\\text\{ASSUME\} \\$end:math:text$</span> <span>\$begin:math:text$ \[\\\\text\{R\.V\.\}\[N\]\] \\$end:math:text$</span> : Default happens on the Year <span>\$begin:math:text$ \[n\,\\\\\: n \= 1$1$\\\\infty\] \\$end:math:text$</span> </div> `; function openPopup(){ const popupContent = document.getElementById("popupContent"); popupContent.innerHTML = htmlContent; document.getElementById("overlay").style.display="block"; document.getElementById("popup").style.display="block"; /* render math */ MathJax.typesetPromise([popupContent]); } </script> </body> </html>

However this is not rendering the math expression correctly. Below is the output in my Opera browser. Could you please to resolve this rendering problem?

The text as is rendered in my Opera browser

$begin:math:text$ \text{ASSUME} $end:math:text$ $begin:math:text$ [\text{R.V.}[N]] $end:math:text$ : Default happens on the Year $begin:math:text$ [n,\: n = 1(1)\infty] $end:math:text$ Discriminant: $begin:math:display$ D = b^2 - 4ac $end:math:display$ $begin:math:text$D>0$end:math:text$ → two real roots $begin:math:text$D=0$end:math:text$ → one root $begin:math:text$D<0$end:math:text$ → complex roots

Snapshot:

enter image description here