在 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 一起使用。请参阅我的存储库或尝试 Nuget 包。

https://github.com/limefrogyank/MathJaxBlazor