code标签仅适用于内联代码片段，加background-color会破坏语义与可访问性；多行代码必须用pre包裹code，前者保格式，后者定语义，二者缺一不可。
code 标签本身不带背景色，直接加 background-color 会破坏语义和可访问性，也不解决多行、缩进、语法高亮等真实需求——它只适合极简的内联代码片段，比如函数名或命令字面量。
为什么别给 code 直接套背景色
浏览器对 code 的默认渲染是等宽字体 + 行内流式布局，没有换行控制、无缩进保留、不支持空格折叠。一旦加了 background-color，又没配 padding 和 border-radius，视觉上会紧贴文字，显得拥挤甚至遮挡下划线；更关键的是，它无法承载 HTML 片段、JS 代码块这类需要结构保留的内容。
- 写
<div></div>这种含和 <code>>的内容，浏览器会尝试解析成真实标签，导致 DOM 崩坏 - 多行代码会被压成一行，缩进全丢，
console.log("hello")和function foo() { return 1; }都没法正常展示 - 屏幕阅读器会把整段当普通文本读，失去“这是代码”的语义提示
pre + code 是唯一靠谱组合
真正能安全展示代码的最小合法结构是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>：前者保留换行与空格，后者声明语义。两者缺一不可，单独用哪个都不行。
-
<pre class="brush:php;toolbar:false;"></pre>让const x = 1;的缩进原样呈现，而不是被 HTML 渲染引擎吃掉 <code>告诉辅助技术“这段不是普通文字，是程序代码”，提升可访问性- 所有主流高亮库（如
highlight.js、Prism.js）只识别这个嵌套结构，其他写法一律跳过 - 想加背景色？必须作用于
<pre class="brush:php;toolbar:false;"></pre>或外层容器，而不是孤立的<code>
怎么安全加背景色又不踩坑
背景色该加在 <pre class="brush:php;toolbar:false;"></pre> 上，并配合基础排版样式。但要注意三件事：转义、类名、加载时机。
- HTML 示例代码必须先做实体转义：
替换为 <code><，>替换为>，&替换为&（注意是两个 &） - 如果要用
highlight.js，<code>上必须写class="html"，不能只写class="html"，否则不触发着色 - 脚本必须在 DOM 就绪后执行：
<script>hljs.highlightAll()</script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
