Including MathJax script in headers of Blazor app does not render MathML

Question

I am trying to show MathML equations using MathJax. I have included the script reference for MathML in the head portion. For Razor pages application, MathML is rendered properly. In Blazor (server side app), it shows as plain linear text.

When I refresh the page, it seems like it renders the MathML correctly but quickly reverts to plain text.

I am using .NET Core 3.0. I have also tried it on .NET Core 2.2 but does not work either. Using the script below does not work...

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-svg.js"></script>

but if I use this instead,

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>

it works only after page is refreshed manually.

<p>
    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
        <mi>x</mi> <mo>=</mo>
        <mrow>
            <mfrac>
                <mrow>
                    <mo>&#x2212;</mo>
                    <mi>b</mi>
                    <mo>&#x00B1;</mo>
                    <msqrt>
                        <msup><mi>b</mi><mn>2</mn></msup>
                        <mo>&#x2212;</mo>
                        <mn>4</mn><mi>a</mi><mi>c</mi>
                    </msqrt>
                </mrow>
                <mrow>
                    <mn>2</mn><mi>a</mi>
                </mrow>
            </mfrac>
        </mrow>
        <mtext>.</mtext>
    </math>
</p>

Instead of showing the value of x of quadratic equation, it shows "x = − b ± b2 − 4ac 2a ." All math symbols / formatting are omitted.

If I refresh the page, then the MathML formatting is rendered properly. If I navigate to other pages and back to the page with MathML, page has to be refreshed in order to see the correct rendering.

Answer 1

The basic answer is that MathJax used this way is not going to work in Blazor. Anything that modifies the DOM is going to conflict with Blazor.

As soon as a Blazor re-render occurs, Blazor is going to wonder what happened to the tags that used to be there that MathJax removed.

Either:

1. You need to render this as part of a component where the MathML is not part of the DOM but rather a string parameter to your component.
2. For every re-render, you need to undo what MathJax has done to the page, let it re-render, then re-do MathJax's stuff.

I've done #1 for both Tex and MathML. For #2, I've only done this with Tex formatting... I haven't been able to get it to work with MathML yet. See how in my repo or just try the Nuget package.

https://github.com/limefrogyank/MathJaxBlazor