Render Mathjax on content change

RootofalleviI commented 1 year ago

Hi there,

Thank you for developing this amazing tool. I just have one quick question.

Is it possible to trigger MathJax rendering after I dynamically change the source for Zero-md? Currently, I'm using Zero-md within a Lit-based project with the following code:

Here, this.rawText represents dynamic content that the user can set. However, when it gets reloaded, the MathJax rendering process is not triggered.

Thanks!

zerodevx commented 1 year ago

Try something like this:

<head>
  <script>
    // Configure MathJax settings
    MathJax = {
      tex: {
        inlineMath: [
          ['$', '$'],
          ['\\(', '\\)']
        ]
      }
    }
    addEventListener('zero-md-rendered', () => MathJax.typeset())
  </script>
  <!-- Load MathJax library -->
  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  <!-- Load zero-md -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"
  ></script>
</head>

<body>
  <!-- Render zero-md into light dom -->
  <zero-md no-shadow>
    <script type="text/markdown">$a_2 + b^2 = d^e$</script>
  </zero-md>
</body>

Updated example here: https://zerodevx.github.io/zero-md/recipes/

RootofalleviI commented 1 year ago

Oh man, thank you so much for your quick help.

zerodevx / zero-md

Render Mathjax on content change #88