itanimulli

MathJax 3 markup inside HTML tags

Last updated on .

I am using MathJax for maths markup and typography in posts where it is useful. One thing I wanted to do was only markup segments inside a <math> tag such as <math>\alpha</math> tags instead of the default $\alpha$. I also wanted to use an html property as a boolean to determine if the tag was meant to be displayed as a block instead of inline (the default). I was also considering using <m> as the math tag instead, either would have been fine.

Anyway, this is how I did it:

<script>
  window.MathJax = {
      options: {
          renderActions: {
              addMenu: [],
              checkLoading: [],
              find: [10, function (doc) {
                  for (const node of document.querySelectorAll('math')) {
                      const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], node.hasAttribute('block'));
                      const text = document.createTextNode('');
                      node.parentNode.replaceChild(text, node);
                      math.start = {node: text, delim: '', n: 0};
                      math.end = {node: text, delim: '', n: 0};
                      doc.math.push(math);
                  }
              }, '']
          },
      },
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" id="MathJax-script"></script>