Mkdocs material LaTeX not rendering in instant mode - mkdocs

Question

I am trying to use KaTeX in Mkdocs Material theme. When the 'instant mode' is off, everything works fine. However, in the instant mode, only the KaTeX in the page I enter first is rendered, while the rest KaTeX (loaded when clicked on internal links) remain in plain text with the delimiters \( and \). To render these KaTeX, I have to refresh the whole page. How can I fix this?
I tried 3 pieces of JavaScript, but all of them behaves as described above.
1.
document.addEventListener('DOMContentLoaded', function() {
renderMathInElement(document.body, {
delimiters: [
{left: '\\[', right: '\\]', display: true},
{left: '$$', right: '$$', display: true},
{left: '\\(', right: '\\)', display: false},
{left: '$', right: '$', display: false},
]
});
});
document.onreadystatechange = function () {
if (document.readyState == "complete") {
renderMathInElement(document.body, {
delimiters: [
{left: '\\[', right: '\\]', display: true},
{left: '$$', right: '$$', display: true},
{left: '\\(', right: '\\)', display: false},
{left: '$', right: '$', display: false},
]
});
}
}
https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/#loading-katex
Also, the Arithmatex extension is on. In mkdocs.yml:
markdown_extensions:
- pymdownx.arithmatex:
generic: true

Answer 1

MathJax 3 handles this automatically and should work with Material's instant loading out-of-the-box. See https://squidfunk.github.io/mkdocs-material/reference/mathjax/#arithmatex for setup instructions.
If you wish to use another typesetting library with instant loading which doesn't catch location changes, you can listen for them yourself and re-trigger typesetting by adding some additional JavaScript:
app.location$.subscribe(function() {
// instant loading finished
})