[SOLVED] KaTeX and dynamic content

KaTeX and dynamic content

I have an HTML document with dynamic content including mathematical formulas. I would like to render the dynamically generated mathematics using KaTeX. Following various suggestions online, my current setup is:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <style>
        /* LaTeX display environment will effect the LaTeX characters but not the layout on the page */
        span.katex-display {
          display: inherit; /* You may comment this out if you want the default behavior */
        }
        body {
            background-color: black;
            color: white;
        }
    </style>
    <title>QUESTIONS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
      onload="renderMathInElement(document.body);"></script>
    <script src="main.js"></script>
    <title></title>
  </head>
  <body>
    <div id="myapp"></div>
    <script>
        var app = Elm.Main.init({
          node: document.getElementById('myapp'),
          flags: Date.now()
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInElement(document.body, {
             // customised options
             // • auto-render specific keys, e.g.:
             delimiters: [
                 {left: '$$', right: '$$', display: true},
                 {left: '$', right: '$', display: false},
                 {left: '\\(', right: '\\)', display: false},
                 {left: '\\[', right: '\\]', display: true}
             ],
             // • rendering keys, e.g.:
             throwOnError : false
            });
        });
    </script>
  </body>
</html>

where main.js is ELM generated javascript. The initial content generated by the script has some mathematical formulas and they are displayed correctly. Unfortunately mathematical formulas generated after interacting with the page are not rendered.

Any help / suggestions would be greatly appreciated.

Solution

You render math only during page load, in the DOMContentLoaded event handler and also on script load.

Identify some other suitable event and run the code there as well (or instead). Ideally that other event would be the update that caused the content of the page to change in the first place. In the worst case you could use some timer event instead, but that feels inferior.