是行内元素，忽略换行与空格，无法响应式；必须嵌套于中，配合width: 100%、max-width、overflow-x: auto及-webkit-overflow-scrolling: touch等css才能实现自适应与平滑滚动。
<code> 标签本身不具备响应式能力，它只是语义化标记——真正让代码块“自适应+可滚动”的，是 <pre class="brush:php;toolbar:false;"></pre> + CSS 的组合。单独用 <code> 写多行代码，换行、空格全丢，根本没法看。
为什么<code>不能直接做响应式代码块
<code> 是行内元素，默认忽略换行和多余空格；浏览器会把它当普通文字处理。哪怕你写成：
<code>function hello() {<br> console.log("world");<br>}</code>
渲染出来就是一行： function hello() { console.log("world"); }，缩进没了，换行没了。
- 必须嵌套在
<pre class="brush:php;toolbar:false;"></pre>里才能保留格式 -
<pre class="brush:php;toolbar:false;"></pre>默认宽度由内容撑开，不设width或max-width，margin: 0 auto就无效 - 不加
overflow-x: auto，长代码会直接撑破容器，破坏布局
<pre class="brush:php;toolbar:false;"><code></code> 套路的最小可用CSS</pre>
这是能跑通的最简样式，适配绝大多数静态博客或文档页：
.highlight {
width: 100%;
max-width: 800px;
margin: 1em auto;
background: #f6f8fa;
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
white-space: pre;
line-height: 1.5;
}
-
width: 100%让它随父容器缩放，但必须配max-width防止大屏过宽 -
overflow-x: auto是关键——只在需要时显示滚动条，比scroll更克制 -
white-space: pre不是必须（<pre class="brush:php;toolbar:false;"></pre>自带），但显式声明可防某些重置样式干扰 - 别漏掉
margin: 0清除<pre class="brush:php;toolbar:false;"></pre>默认上下边距，否则居中会偏移
移动端滚动体验差？加这两行CSS
iOS Safari 和部分安卓 WebView 对 overflow-x: auto 的触控滚动支持弱，容易卡顿或无法拖动。补上：
.highlight {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
-
-webkit-overflow-scrolling: touch激活原生惯性滚动（iOS 15+ 已默认启用，但老版本仍需） -
overscroll-behavior-x: contain阻止水平滚动时触发页面回弹（比如拉到头还继续拽，整个页面跟着晃） - 这两行不影响桌面端，可放心加
语法高亮库输出的<pre class="brush:php;toolbar:false;"></pre>类名怎么找
Prism.js、Highlight.js、Rouge 等工具生成的 HTML 结构不统一，常见情况：
- Prism.js：通常是
<pre class="js"><code class="js">...</code>
- Highlight.js：可能是
<pre class="brush:php;toolbar:false;"><code class="hljs js">...</code></pre> - Rouge（Jekyll）：常为
<div class="highlight"><pre class="brush:php;toolbar:false;"><code>...</code></pre></div>
别盲目套 .highlight —— 打开浏览器开发者工具，右键代码块 → “检查”，看最外层包裹元素的 class 名，然后把上面的 CSS 选择器替换成实际类名，比如 <code>pre.language-js 或 div.highlight pre。
最麻烦的其实是 <code> 被自动转义的问题：如果你直接把 <div> 粘进 HTML，没转成 <code><div>，浏览器就真去解析标签了。这个错不会报错，但代码直接消失——得靠服务端渲染或 JS 库自动转义，纯前端手写必须自己 replace(/, '<').replace(/>/g, '>')。
