在 Blazor 应用程序的标头中包含 MathJax 脚本不会呈现 MathML

Question

我正在尝试使用 MathJax 显示 MathML 方程。我在头部包含了 MathML 的脚本参考。对于 Razor 页面应用程序，正确呈现 MathML。在 Blazor（服务器端应用程序）中，它显示为纯线性文本。

当我刷新页面时，它似乎正确呈现了 MathML，但很快又恢复为纯文本。

我正在使用 .NET Core 3.0。我也在 .NET Core 2.2 上尝试过，但也不起作用。 使用下面的脚本不起作用...

<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>

但如果我改用这个，

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

它仅在手动刷新页面后才起作用。

<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>

它不显示二次方程的 x 值，而是显示“x = - b ± b2 - 4ac 2a ”。省略所有数学符号/格式。

如果我刷新页面，则 MathML 格式会正确呈现。如果我导航到其他页面并返回到使用 MathML 的页面，则必须刷新页面才能看到正确的呈现。

Answer 1

基本的答案是使用这种方式的 MathJax 在 Blazor 中不起作用。任何修改 DOM 的东西都会与 Blazor 发生冲突。

一旦发生 Blazor 重新渲染，Blazor 就会想知道 MathJax 删除的标签发生了什么变化。

要么：

1. 您需要将此作为组件的一部分呈现，其中 MathML 不是 DOM 的一部分，而是组件的字符串参数。
2. 对于每次重新渲染，您需要撤消 MathJax 对页面所做的操作，让它重新渲染，然后重新执行 MathJax 的操作。

我已经为 Tex 和 MathML 完成了 #1。对于#2，我只用 Tex 格式完成了这个......我还不能让它与 MathML 一起工作。在我的 repo 中查看方法或尝试 Nuget 包。

https://github.com/limefrogyank/MathJaxBlazor