在 Blazor 应用的 headers 中包含 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 删除的标签发生了什么。

或者：

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

我已经完成了 Tex 和 MathML 的第一名。对于 #2，我只用 Tex 格式完成了这个……我还不能让它与 MathML 一起工作。在我的存储库中查看如何操作或尝试使用 Nuget 包。

https://github.com/limefrogyank/MathJaxBlazor

在 Blazor 应用的 headers 中包含 MathJax 脚本不会呈现 MathML

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

mathjax

blazor