2

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
x4Cx58x54
  • 21
  • 2

1 Answers1

0

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
})
squidfunk
  • 391
  • 3
  • 17
  • Well since instant mode is for faster loading, KaTeX, which is faster than MathJax, would be a better choice as far as I am concerned. I was guessing that the problem in the integration of KaTeX is when and how the rederer function is called in JavaScript. – x4Cx58x54 Aug 03 '20 at 07:53
  • I edited my answer above to include an example, how to achieve this with another typesetting library. – squidfunk Aug 04 '20 at 09:23