KaTeX does not render on GitHub

[NicolasNewman]

Description

As per the comment posted on the KaTeX integration PR, math does not render at all despite GitHub upgrading to v10.9.0.

Steps to reproduce

Input:

graph LR
  B("$$\sqrt{\frac{\pi(1-\pi)}{n}}$$")
  A-->B

Output:

graph LR
  B("$$\sqrt{\frac{\pi(1-\pi)}{n}}$$")
  A-->B

Expected:

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: v10.9.0
• Browser and Version: Firefox v124.0.2

Suggested Solutions

No response

Additional Context

Discussion on KaTeX integration PR

[NicolasNewman]

It appears that none of the MathML related HTML is appended to the diagram on GitHub

GitHub:

Local webpage:

[NicolasNewman]

I will be jotting down some of my findings here as I'm essentially debugging within the issue itself.

The expected HTML that should be contained within span.katex for the above test:

<foreignObject width="75.03334045410156" height="92.21665954589844">
    <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
            class="nodeLabel"><br>
            <div style="display: flex; align-items: center; justify-content: center; white-space: nowrap;"><br> <span
                    class="katex"><math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
                        <mrow>
                            <msqrt>
                                <mfrac>
                                    <mrow>
                                        <mi>π</mi>
                                        <mo stretchy="false">(</mo>
                                        <mn>1</mn>
                                        <mo>−</mo>
                                        <mi>π</mi>
                                        <mo stretchy="false">)</mo>
                                    </mrow>
                                    <mi>n</mi>
                                </mfrac>
                            </msqrt>
                        </mrow>
                    </math></span><br> </div><br>
        </span></div>
</foreignObject>

Pasting it directly into the issues DOM tree renders correctly with the proper sizing:

[NicolasNewman]

GitHub's implementation of Mermaid

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid

I'll keep investigating but currently it seems that the issue arises in the viewscreen component. If that's the case, it will be very difficult to isolate the issue on our end.