Dynamically added MathJax(LATEX) Element is not rendering in Browser

Trying to dynamically generate a LATEX notation for use of symbolic math. By checking the output with the browsers “inspect”, the resulting output seems to be correct, but as its execution runs asynchronously writing as text inside the DIV element named “output”.

The final text, a string shown at the screen is: (Delta^{y}_{l}) and is not showing the expected graphical MathJax element.

When testing a standard HTML input using another element, the symbol rendering works OK and a graphical delta symbol is shown inside the MathJax widget, so my conclusion is that MathJax is active.

The HTML source is:

<div id="output" class="mathjax"></div)
<py-script output="output">
.. script 
print("(" + mylatexstr +  ")")

Below the output generated dynamically inside DIV using pyscript & sympy shown by inspect:

<div id="output" class="mathjax"> ... 
<script type="math/tex" id="MathJax-Element-1">Delta^{y}_{l}</script>

I’ve added a function to trigger a reload of the MathJax to render all pending elements at the end of the HTML page loading:

<script>
function update_mathjax(){
    MathJax.Hub.Queue(['Typeset',MathJax.Hub,'output']);
}
window.onload = function() {
    //everything is loaded
    update_mathjax()
}; 
</script>     
</body)

Something seems to be missing to trigger the MathJax rendering function after the completion of the scripted output. Thanks for support or insights.

Full code:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>PyScript Demo</title>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\(","\)"] ],
      processEscapes: true
    }
  });
</script>    
<script type="text/javascript"
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>    
      <py-env>
- sympy         
      </py-env>    
</head>
<body>

<div id="output" class="mathjax">(Delta^{y}_{l})</div>

<py-script output="output">
from sympy import *
import sympy.printing as printing
init_printing(use_latex=True)    
delta__y_l = symbols('Delta__y_l') 
mylatexstr = str(latex(delta__y_l))     
# print("(" + mylatexstr +  ")") 
print("$$" + mylatexstr +  "$$")    
</py-script> 
<script>
function update_mathjax(){
    MathJax.Hub.Queue(['Typeset',MathJax.Hub,'output']);
}
window.onload = function() {
    update_mathjax()
};        
</script>
</body>    
</html>

Answer

The key to solving your problem is to typeset the result. Just printing the output will not work.

This JavaScript function will interface with MathJax to draw the result. The parameter str is your mylatexstr.

function draw(str) {
        var math = MathJax.Hub.getAllJax("MathDiv")[0];
        MathJax.Hub.Queue([ "Text", math, str ]);
}

The second key item is to define a location to draw the result. This requires a certain syntax. My JavaScript draw funtion requires a matching div ID (MathDiv). You can of course change the IDs. Just do so in both locations.

<div id="MathDiv">({})</div>

Next, I simplified your Python code to correctly draw using my custom draw function:

<py-script>
import js
from sympy import *

delta__y_l = symbols('Delta__y_l')
mylatexstr = latex(delta__y_l)

js.draw(mylatexstr)

</py-script>

I cleaned up your original code a bit, removed unnecessary sections, and removed the hardcoded formulas.

You can see a working demo on my website: link If you have errors, right-click on my demo and copy the page code.

Complete example:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>PyScript Demo</title>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'], ["\(","\)"] ],
        processEscapes: true
      }
    });
  </script>
  <script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>

  <py-env>
    - sympy
  </py-env>
</head>
<body>

<div id="MathDiv">({})</div>

<py-script>
import js
from sympy import *

delta__y_l = symbols('Delta__y_l')
mylatexstr = latex(delta__y_l)

js.draw(mylatexstr)

</py-script> 
<script>

function draw(str) {
    var math = MathJax.Hub.getAllJax("MathDiv")[0];
    MathJax.Hub.Queue([ "Text", math, str ]);
}

</script>
</body>
</html>

Advertisement

Answer