如何强制浏览器显示MathML代码而非渲染后的公式？

嘿，我来分享几个实用的方法，帮你让浏览器直接展示MathML的原始代码，而不是自动渲染成公式：

方法1：转义HTML特殊字符 #

浏览器会自动解析<和>这类HTML标签符号，所以只要把这些特殊字符转成对应的HTML实体，就能阻止浏览器解析MathML标签：

• 把 < 替换成 <
• 把 > 替换成 >

举个例子，原本的MathML代码：

<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow></semantics></math>

转义后变成：

<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow></semantics></math>

把转义后的代码放到页面里，浏览器就会显示原始的MathML标签内容了。

方法2：用<pre>或<code>标签包裹 #

这两个HTML标签专门用来展示预格式化的代码内容，浏览器会默认把标签内的所有内容当成纯文本处理，不会解析其中的HTML/XML标签：

块级显示（适合多行代码） #

<pre>
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow></semantics></math>
</pre>

行内显示（适合嵌入文本中） #

点<code><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow></semantics></math></code>所在的坐标轴是_____

如果你的页面是动态生成的，建议结合方法1的转义操作一起用，避免意外解析。

方法3：用JavaScript批量转换已渲染的MathML #

如果页面上已经有渲染好的MathML公式，想批量转换成显示原始代码的形式，可以用一段简单的JS脚本实现：

// 选中页面上所有的math元素
const mathElements = document.querySelectorAll('math');

mathElements.forEach(mathEl => {
  // 创建一个pre元素用来展示代码
  const codeBlock = document.createElement('pre');
  // 将math元素的原始HTML代码赋值给pre的文本内容（自动转义特殊字符）
  codeBlock.textContent = mathEl.outerHTML;
  // 用pre元素替换原来的math元素
  mathEl.parentNode.replaceChild(codeBlock, mathEl);
});

把这段脚本放到页面底部或者DOM加载完成的事件里，就能自动把所有渲染好的公式换成原始代码展示。

另外补充一下你提到的「将MathML渲染为纯文本时生成TeX输出」的需求：如果是要把MathML转换成TeX代码显示，而不是展示MathML原始标签，可以使用专门的转换库（比如MathJax内置的转换功能，或者轻量的MathML-to-TeX工具）先把MathML转换成TeX字符串，再用<code>或<pre>标签包裹展示即可。

内容的提问来源于stack exchange，提问作者Insight Academy Private Tutori