单独使用 code 标签无法实现语法高亮，因其为行内元素会压缩空白符，且 highlight.js 等库默认只解析 pre>code 嵌套结构；必须配合 pre 保留格式、正确 class（如 language-js）、HTML 字符转义、CSS 主题引入及恰当执行时机。
code 标签本身**不实现高亮**，它只声明语义、应用等宽字体，真正实现语法高亮必须配合 pre 结构、第三方库和正确配置。
为什么单独用 code 标签永远无法高亮
code 是行内元素，浏览器会压缩所有换行和多余空格，多行代码直接塌成一行；更重要的是，highlight.js、Prism.js 等主流库**默认完全忽略单独的 code 标签**——它们只扫描 pre 嵌套结构。常见错误包括：<p><code class="js">const x = 1;</code></p>、<div><code><div></div></code></div>，这两者都不会触发任何解析。
必须写对 precode 嵌套结构
这是高亮生效的底层前提，不是可选项：
-
pre保留原始缩进、换行、空格，为语法分析提供结构依据 -
code声明内容是计算机代码，而非普通文本，赋予语义和基础样式 - 二者缺一不可：
<pre><code class="html"><div id="app"></div></code></pre> - HTML 特殊字符必须提前转义：
<→，<code>>→>，&→&（注意 & 要写两次）
class 值必须匹配高亮库规则
highlight.js 严格识别 language- 或 lang- 前缀，Prism.js 略宽松但推荐统一风格：
- ✅ 正确：
class="js"、class="lang-python"、class="bash" - ❌ 无效：
class="js"、class="javascript"、class="HTML"（大小写敏感）、class="html5" - 不确定语言时可用
class="plaintext"防止误解析 - 服务端渲染或 Markdown 解析器输出时，务必校验生成的 class 是否符合该格式
加载时机、CSS、动态内容三处最容易漏掉
即使结构和 class 全对，以下任一缺失都会导致“有代码无颜色”：
立即学习“前端免费学习笔记（深入）”；
- 脚本必须在 DOM 就绪后执行：
hljs.highlightAll()不能放在<head>里直接调；稳妥做法是把<script>放在</body>前，或用document.addEventListener('DOMContentLoaded', () => hljs.highlightAll()); - CSS 主题文件必须显式引入：只引
highlight.min.js不引github-dark.min.css，结果就是纯黑字白底 - 动态插入的代码块（如 Vue
v-html、ReactdangerouslySetInnerHTML、fetch 后渲染）不会被自动捕获，需手动调hljs.highlightElement(el)，且el必须是带正确class的code元素
code，或者以为引入 JS 就万事大吉，忘了 CSS 和执行时机。这两点不检查，再准的 class 名也没用。 
