必须是<pre>嵌套结构：pre为外层容器保留格式，code为内层标签声明语义；颠倒或单独使用会导致DOM修正、高亮失效、无障碍支持缺失；class须加在code上并匹配高亮库要求，代码中<、>、&须转义，pre需CSS设置white-space: pre-wrap和overflow-x: auto。
pre 必须是外层容器，code 必须嵌套在内部
浏览器解析时，<code><pre>...</pre></code> 是非法结构，HTML 解析器会自动修正 DOM：把 <pre> 提到外面、<code> 孤立成行内元素，最终导致缩进丢失、高亮不触发、屏幕阅读器读作“普通文本”而非“代码”。唯一被 HTML 规范、Prism.js、highlight.js 和 SEO 工具共同认可的结构是 <pre><code>...</code></pre>。
class 属性必须加在 code 标签上，且命名要匹配高亮库
高亮库靠 <code> 的 class 判断语言类型，写错位置或格式等于没写：
- ✅ 正确：
<code class="javascript">、<code class="lang-python"> - ❌ 错误：
<pre class="javascript"><code>（class 在 pre 上）、<code class="js">（highlight.js 默认不认简写）、<code lang="js">（部分库不支持 lang 属性）
原始代码中的 、& 必须转义，否则会被浏览器解析为标签
比如直接写 <div>hello</div>，浏览器会尝试渲染这个 <div>，可能导致 DOM 错乱或脚本执行。正确做法是先做 HTML 实体转义：
-
<→ -
>→> -
&→&
服务端输出前编码，或前端用 textContent 动态插入，比正则替换更可靠。
立即学习“前端免费学习笔记（深入）”；
pre 默认不换行也不滚动，需手动加 CSS 控制显示
<pre> 原生行为是强制保留空格+换行，但超出容器宽度时既不折行也不出现横向滚动条，用户只能拖拽查看——体验极差。必须加一行 CSS 修复：
pre {
white-space: pre-wrap;
overflow-x: auto;
}
注意：别只写 white-space: pre-line，它会吃掉缩进；也别漏掉 overflow-x: auto，否则长行依然不可见。
