必须嵌套使用 ： 保留格式但无语义， 有语义但不保留换行；单独使用均不可靠，且需转义 html 字符、用空格缩进、添加语言类名以支持高亮。
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 必须嵌套使用，单独用任一标签都不可靠。
为什么不能只用 <pre class="brush:php;toolbar:false;"></pre>
<pre class="brush:php;toolbar:false;"></pre> 确实保留换行和空格，但它不声明“这是代码”——只是“按原样显示”。搜索引擎可能忽略语义，屏幕阅读器读作“预格式化文本”，而非“JavaScript 代码块”。CSS 想统一给所有代码加背景色时，<pre class="brush:php;toolbar:false;"></pre> 会把诗歌、日志甚至 ASCII 艺术也染上。更关键的是，语法高亮库（如 Prism.js 或 highlight.js）基本都依赖 <code> 标签作为识别入口，没它，高亮直接失效。
为什么不能只用 <code>
<code> 是纯语义标签，浏览器默认用等宽字体渲染，但会**完全忽略换行、缩进和多余空格**。你往里塞一段带缩进的 Python 函数，所有格式全塌成一行，大括号错位，可读性归零。它只适合嵌在句子中的短内容，比如：fetch()、useState、package.json。
正确写法：必须 <pre class="brush:php;toolbar:false;"><code></code> 嵌套 + 转义 HTML 字符</pre>
展示多行代码的唯一可靠组合是 <pre class="brush:php;toolbar:false;"><code></code>，但有三个硬性前提：</pre>
- 所有 HTML 特殊字符必须转义：
→ <code><，>→>，"→"，&→&；否则浏览器会尝试解析成标签 - 缩进统一用空格（别用 Tab），否则不同编辑器/浏览器渲染不一致
- 建议加
class="js"这类语言标识，方便高亮库自动匹配规则
示例（合法且可高亮）：
function greet(name) {
return `Hello, ${name}!`;
}
greet("World");
容易被忽略的细节：服务端 vs 前端转义时机
很多人在前端用 innerHTML 直接插入未转义的字符串，结果页面空白或结构错乱——因为浏览器先解析了其中的 <div> 或 <code><script></script>。正确做法是：
- 服务端输出前就完成转义（如 PHP 用
htmlspecialchars()，Node.js 用he.escape()） - 前端动态插入时，优先用
textContent赋值再取innerHTML，而不是直接拼接字符串 - 若用
highlight.js，它不会帮你转义，必须确保传入<code>的内容已是安全 HTML 实体
最稳妥的底线：只要代码里含 、<code>>、&，就必须转义——哪怕它看起来只是“普通 HTML 示例”。
