必须嵌套<pre>并转义HTML特殊字符，因为是行内元素会压缩空白符，<pre>无语义且不触发语法高亮，单独使用均无法正确展示多行代码并保障可访问性与安全性。
单独用 <code> 显示多行代码会塌成一行，单独用 <pre> 会导致 HTML 标签被浏览器解析执行——必须嵌套 <pre><code>，且 <code> 里所有 <、>、& 都得转义，否则不是展示代码，是运行代码。
为什么 <code> 单独放多行代码会塌成一行
<code> 是行内元素，浏览器默认把换行符、制表符、连续空格全压缩成一个空格。哪怕你写的是带缩进的 Python 函数，最终渲染出来就是一整行，括号错位、逻辑难辨。
- 常见错误现象：
function foo() {\n return true;\n}渲染后变成function foo() { return true; } - 复制到编辑器里也是平的，没法直接运行
- 屏幕阅读器读作普通文字，不会提示“这是一段 JavaScript 代码”
- 语法高亮库（如 Prism.js）通常忽略没嵌在
<pre>里的<code>
为什么 <pre> 单独用会丢失“这是代码”的语义
<pre> 确实保留空格和换行，但它只说自己是“预格式化文本”，不声明内容类型。搜索引擎可能当普通段落索引，屏幕阅读器读作“一段对齐文字”，而不是“JavaScript 函数”。
- 语法高亮库（如 highlight.js）默认不扫描纯
<pre>，直接跳过 - CSS 写
pre { background: #f0f0f0; }，结果把日志、ASCII 图、诗歌全染了色 - 无障碍工具无法区分代码和普通文本，影响可访问性评分
<pre><code> 嵌套时 HTML 特殊字符必须转义
只要原始代码含 <、>、&，就必须实体化，否则浏览器会在解析阶段就把它当标签执行。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<div id="app"></div>直接塞进<code>，<div>会被解析，后续内容错位甚至整个<pre><code>提前闭合 - 服务端渲染建议统一调用
htmlspecialchars()或等效函数 - 前端动态插入时优先用
textContent，别用innerHTML
CSS 控制代码块最容易被忽略的三件事
不显式设置样式，代码块在不同设备上可能完全不可见或难以区分。
- 必须重置默认
margin/padding，加上overflow-x: auto防止长行溢出 -
pre code { display: block; }—— 不加这句，<code>仍按行内处理，横向滚动可能失效 - 字体必须设为等宽：
font-family: ui-monospace, 'SFMono-Regular', monospace;，别依赖浏览器默认 - HTML 源码中
<pre>标签本身的缩进也会被渲染——如果模板里把<pre>写在缩进后，首行就会多出几个空格。要么让标签从行首开始，要么用注释消除：<!--<pre><code class="js">-->
