带MathJax SVG的HTML代码在XHTML中公式无法显示的原因及解决方法

原因 #

1. XHTML的XML严格性限制：XHTML是遵循XML规范的标记语言，对语法严谨性要求远高于HTML。MathJax默认针对HTML环境生成SVG，输出内容可能存在不符合XML规范的细节（比如未正确闭合标签、缺少属性引号、未声明SVG命名空间等）——这些问题在HTML中会被浏览器容错处理，但在XHTML中会直接导致渲染失败。
2. MathJax适配模式不匹配：MathJax默认使用HTML环境的DOM适配器处理元素创建与插入，而XHTML需要专门的XML适配器来处理命名空间、节点操作等XML特有的逻辑，默认配置下未启用该适配器，导致SVG无法正确嵌入XHTML文档。

解决方法 #

1. 确保XHTML文档符合规范 #

• 使用支持MathML和SVG的XHTML文档声明：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
  

• 根元素html必须包含XML命名空间声明：

  <html xmlns="http://www.w3.org/1999/xhtml">
  

2. 配置MathJax适配XHTML环境 #

在加载MathJax的脚本中，明确指定使用XHTML适配器，并配置SVG输出的命名空间：

<script>
MathJax = {
  adaptors: { name: 'xhtml' },
  svg: {
    namespace: 'http://www.w3.org/2000/svg'
  },
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  output: {
    renderer: 'SVG'
  }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

3. 遵循XHTML语法规则 #

所有标签必须闭合（如<br/>而非<br>），属性值必须用引号包裹，标签和属性名统一小写，避免HTML特有的松散语法影响MathJax渲染。

内容的提问来源于stack exchange，提问作者f10w