ASP.NET Core视图中MathML标签渲染异常问题求助

安全阿岳

2026-7-11

解决ASP.NET Core视图中MathML标签渲染异常问题

可能的原因及对应解决方案

1. 修正MathJax的加载位置与配置

你当前将脚本放在了@section Styles区块中，这是用于加载CSS的区域，脚本应放在@section Scripts区块（ASP.NET Core默认布局中该区块通常在页面底部，能确保DOM加载完成后再执行脚本）。同时补充MathML相关配置，确保MathJax能识别原生MathML标签：

@section Scripts {
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        MathML: { extensions: ["mml3.js", "content-mathml.js"] }
    });
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
}

2. 避免MathML标签被HTML转义

如果是通过Razor变量输出MathML内容，必须使用Html.Raw()防止标签被自动编码：

@Html.Raw("<math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mn>2</mn><msqrt><mn>2</mn></msqrt></math>")

若为静态写在视图中的MathML标签，直接编写即可，无需额外处理。

3. 升级至MathJax 3.x版本（推荐）

MathJax 2.7.7属于旧版本，3.x对MathML的支持更完善且性能更优，替换为以下引入方式：

@section Scripts {
<script>
    MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']]
        },
        svg: {
            fontCache: 'global'
        }
    };
</script>
<script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
}

3.x版本会自动处理原生MathML标签，无需额外配置MathML扩展。