KaTeX Instructions Incomplete/Broken

[michaelweinold]

Context

No response

Bug description

I originally opened a discussion on this error here: mkdocs/mkdocs#3928

=Having followed the guide here, I still only get equations of this type:

$$
    a = b
$$

to render as:

\[ a=b \]

Related links

• Can't get KaTeX to render Equations mkdocs/mkdocs#3928
• KaTeX Instructions Incomplete/Broken mkdocs/mkdocs#3930 (comment)

Reproduction

I have created a MWE in this public repo: mkdocs_debugging

Steps to reproduce

run mkdocs serve

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting! Although it was mentioned that this is an issue with Material for MkDocs, it isn't. We have instructions for KaTeX on our documentation, and they work, as has been reported by other users. However, KaTeX itself does not need an integration with Material for MkDocs, we only mention it in our documentation for the sake of completeness. Please understand that we, as maintainers, can't offer support for troubleshooting, but our community is likely able to help ☺️

I'm converting this to a discussion.

[kamilkrzyskow]

Hello @michaelweinold,
the instructions for setting up KaTeX in the docs are given for this theme specifically:

document$.subscribe(({ body }) => { 
  renderMathInElement(body, {
  // ...

the document$ observable object is exposed only in the material theme:

mkdocs-material/src/templates/assets/javascripts/bundle.ts

Lines 308 to 318 in 396c493

	window.document$ = document$ /* Document observable */
	window.location$ = location$ /* Location subject */
	window.target$ = target$ /* Location target observable */
	window.keyboard$ = keyboard$ /* Keyboard observable */
	window.viewport$ = viewport$ /* Viewport observable */
	window.tablet$ = tablet$ /* Media tablet observable */
	window.screen$ = screen$ /* Media screen observable */
	window.print$ = print$ /* Media print observable */
	window.alert$ = alert$ /* Alert subject */
	window.progress$ = progress$ /* Progress indicator subject */
	window.component$ = component$ /* Component observable */

If you run this JavaScript with any other theme you get an error in the Browser Web Tools:

For general usage docs go here:

• https://katex.org/docs/autorender.html#usage

Instead of the document$ observable use the typical document.addEventListener and instead of body use document.body.
The rest looks the same 🤔

EDIT:
I'll copy the example from the other docs to simplify referencing:

document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
        // customised options
        // • auto-render specific keys, e.g.:
        delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false},
            {left: '\\(', right: '\\)', display: false},
            {left: '\\[', right: '\\]', display: true}
        ],
        // • rendering keys, e.g.:
        throwOnError : false
    });
});