LMS项目MathJax渲染异常：线上学生端公式未解析，管理员端正常
2026-6-25
LMS项目MathJax渲染异常问题
本地环境下，管理员、教师、学生角色的数学公式渲染均正常；但线上环境中，仅学生登录后公式未被MathJax解析，直接显示原始TeX代码，管理员/教师端无此问题。
相关组件代码
import { MathJaxContext, MathJax } from 'better-react-mathjax' // MathJax默认配置 const mathJaxConfig = { loader: { load: ['input/tex', 'output/chtml'] }, tex: { inlineMath: [ ['$', '$'], ['\\(', '\\)'] ], displayMath: [ ['$$', '$$'], ['\\[', '\\]'] ] }, chtml: { displayAlign: 'center', scale: 1 } // 输出样式配置 } const MathJaxWrapper = ({ children }: any) => ( <MathJaxContext version={3} config={mathJaxConfig}> <MathJax>{children}</MathJax> </MathJaxContext> ) export default MathJaxWrapper
组件调用代码
{currentQuestionAnswer?.answer === value.v && <CheckIcon />} <MathJaxWrapper> <p dangerouslySetInnerHTML={{ __html: value.d?.text }} /> </MathJaxWrapper>
旧渲染代码（替换前）
<MarkdownV2 maxWidth="250px"> {value.d.text ? getReplaceImage( value.d.text .replace(/\\/g, '') ?.replaceAll(/(?<!<)\//g, '') ?.replaceAll(/[{}]/g, '') ?.replaceAll(/tex/g, '$$$') ?.replaceAll(/'/g, ''), currentSection?.[ currentSection.findIndex( (question) => question.questionId === currentQuestionId ) ?? 0 ]?.solutionImages ) : ''} </MarkdownV2>
渲染差异
- 线上学生端DOM（未解析）：
<span class="math display">$$2\pi\sqrt{\frac{\left( x_{1}^{2} + x_{2}^{2} \right)}{\left( v_{1}^{2} + v_{2}^{2} \right)}}$$</span>
- 线上管理员端DOM（已解析）：
<span class="math display"><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="19" style="font-size: 113.9%; position: relative;"><mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D70B TEX-I"></mjx-c></mjx-mi><mjx-msqrt><mjx-sqrt class="mjx-tall"><mjx-surd><mjx-mo class="mjx-n"><mjx-stretchy-v class="mjx-c221A" style="height: 3.6em; vertical-align: -1.05em;"><mjx-beg><mjx-c></mjx-c></mjx-beg><mjx-ext><mjx-c></mjx-c></mjx-ext><mjx-end><mjx-c></mjx-c></mjx-end><mjx-mark></mjx-mark></mjx-stretchy-v></mjx-mo></mjx-surd><mjx-box style="padding-top: 0.446em;"><mjx-mfrac><mjx-frac type="d"><mjx-num><mjx-nstrut type="d"></mjx-nstrut><mjx-mrow><mjx-mo class="mjx-sop"><mjx-c class="mjx-c28 TEX-S1"></mjx-c></mjx-mo><mjx-msubsup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-msubsup space="3"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-sop"><mjx-c class="mjx-c29 TEX-S1"></mjx-c></mjx-mo></mjx-mrow></mjx-num><mjx-dbox><mjx-dtable><mjx-line type="d"></mjx-line><mjx-row><mjx-den><mjx-dstrut type="d"></mjx-dstrut><mjx-mrow><mjx-mo class="mjx-sop"><mjx-c class="mjx-c28 TEX-S1"></mjx-c></mjx-mo><mjx-msubsup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D463 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-n" space="3"><mjx-c class="mjx-c2B"></mjx-c></mjx-mo><mjx-msubsup space="3"><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D463 TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.297em; margin-left: 0px;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom><mjx-spacer style="margin-top: 0.18em;"></mjx-spacer><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msubsup><mjx-mo class="mjx-sop"><mjx-c class="mjx-c29 TEX-S1"></mjx-c></mjx-mo></mjx-mrow></mjx-den></mjx-row></mjx-dtable></mjx-dbox></mjx-frac></mjx-mfrac></mjx-box></mjx-sqrt></mjx-msqrt></mjx-math><mjx-assistive-mml unselectable="on" display="block"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mn>2</mn><mi>π</mi><msqrt><mfrac><mrow data-mjx-texclass="INNER"><mo data-mjx-texclass="OPEN">(</mo><msubsup><mi>x</mi><mrow data-mjx-texclass="ORD"><mn>1</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo>+</mo><msubsup><mi>x</mi><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo data-mjx-texclass="CLOSE">)</mo></mrow><mrow data-mjx-texclass="INNER"><mo data-mjx-texclass="OPEN">(</mo><msubsup><mi>v</mi><mrow data-mjx-texclass="ORD"><mn>1</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo>+</mo><msubsup><mi>v</mi><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow><mrow data-mjx-texclass="ORD"><mn>2</mn></mrow></msubsup><mo data-mjx-texclass="CLOSE">)</mo></mrow></mfrac></msqrt></math></mjx-assistive-mml></mjx-container></span>
排查与解决方案建议
- 检查资源加载状态：打开学生端浏览器控制台Network面板，查看MathJax相关脚本、样式的HTTP状态码，确认是否存在403/404等加载失败情况，排查是否因权限或CDN缓存导致资源无法获取。
- 对比内容原始值：打印学生端与管理员端的
value.d.text原始内容，检查学生端的TeX代码是否被额外转义（比如反斜杠多转义一次），导致MathJax无法识别语法。 - 调整渲染时机：若学生端内容为异步加载，尝试在内容完全渲染后手动触发MathJax重渲染，可使用
MathJax.typeset()或better-react-mathjax提供的刷新API。 - 排查构建差异：检查线上构建配置，确认是否针对学生端做了Tree Shaking等优化，导致MathJax相关代码被误剔除，确保构建时保留better-react-mathjax依赖。
- 检查CSP策略：查看浏览器控制台的CSP报错信息，确认是否因内容安全策略限制，阻止了MathJax的动态脚本执行，调整策略允许相关资源加载。
内容的提问来源于stack exchange，提问作者Ravi Sen
相关产品推荐
相关产品推荐
