<code>标签不能渲染数学公式，仅适合展示LaTeX源码；真公式需MathJax/KaTeX等引擎处理，<code>可作数据容器配合JS转换。
用 <code> 标签直接显示数学公式会出问题
<code> 是语义化标签，用于标记一段计算机代码或命令文本，浏览器默认按等宽字体渲染，但不支持数学排版。如果你把 ax² + bx + c = 0 套进 <code>，平方符号可能错位、上下标丢失、希腊字母乱码，更别说积分、分式这些——它根本不是为数学设计的。
常见错误现象：∑i=1^n i 显示成平铺字符串，x_1 不是下标而是字面下划线，\frac{a}{b} 直接原样输出反斜杠和花括号。
- 别用
<code>替代数学渲染（LaTeX、MathML） - 如果只是临时展示「源码写法」（比如教人怎么写 LaTeX），
<code>可以用，但必须明确标注这是「代码」而非「公式结果」 - 需要真公式效果？得靠
MathJax或katex渲染引擎，<code>只能当容器配合<span>或<div>使用
想在网页里“展示公式代码”本身，这样写才对
比如你想告诉别人「这个公式是用 LaTeX 写的」，重点是让读者看清你敲了什么字符，而不是渲染结果。这时 <code> 是合适的，但要注意转义和可读性：
<p>求根公式写法：<code>\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</code></p>关键点：
立即学习“前端免费学习笔记（深入）”；
- LaTeX 源码必须放在
<code>内，且不能被 MathJax 自动处理（否则会被渲染掉） - 若页面已加载 MathJax，需给该
<code>加class="no-math"并配置 MathJax 忽略（如skipTags: ["code"]） - 避免在
<code>里混用 HTML 实体（如α），一律用纯 ASCII 或 UTF-8 字符（α可以，但要确保文件编码为 UTF-8）
真正渲染数学公式，<code> 只能打下手
实际项目中，公式渲染由 JavaScript 库接管，<code> 最多用来包裹原始表达式，再由脚本读取并转换。例如 KaTeX 推荐写法：
<span class="math math-inline"><code>\int_0^\infty e^{-x^2} dx</code></span>然后用 JS 初始化：
document.querySelectorAll('.math-inline code').forEach(el => {
const tex = el.textContent;
el.innerHTML = katex.renderToString(tex, { displayMode: false });
});注意：
-
<code>在这里是数据载体，不是渲染目标 - 不能省略
textContent读取——用innerHTML会二次解析 HTML 实体，破坏 LaTeX 反斜杠 - KaTeX 默认不支持某些 LaTeX 宏包（如
\cancel），得显式启用扩展
兼容性差的边缘情况：旧浏览器或禁用 JS 时怎么办
如果用户关闭 JavaScript，或你在邮件模板、静态文档中嵌入，<code> 就成了唯一可用的「降级显示」方式。这时要主动降低预期：
- 公式尽量扁平化：用
x^2代替x²，用sqrt(...)代替\sqrt{...} - 加辅助文字说明：「上式表示：x 的平方加 y 的平方等于 r 的平方」
- 避免嵌套过深的 LaTeX（如矩阵、多行对齐），它们在纯文本下完全不可读
最麻烦的是斜杠和反斜杠混淆——\frac{1}{2} 在纯 <code> 下就是 7 个字符，没人知道它本该是分数；这种时候，宁可换图片或 SVG，也别硬撑。
