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 $ tag such as [itex]\alpha$ 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: {
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>