控制代码块高度的唯一可靠方式是用 pre 包裹 code 并对 pre 设置 max-height 和 overflow-y:auto；pre 默认块级，支持高度控制，而 code 行内元素设 height 无效。
直接给 设 height 无效，因为它不是块级元素
code 是行内元素，浏览器默认忽略它的 <code>height、max-height 和 overflow 等属性。你写 style="max-height: 200px; overflow-y: auto;" 完全没反应——这不是 bug，是规范行为。
常见错误现象：
- 把多行代码硬塞进单个
code标签，再加height试图截断，结果整段被压成一行且无法滚动 - 用
display: block强转后设高度，但未处理white-space，导致换行丢失或文字在单词中间折断
真正能控制高度的，只能是它的父容器 pre，或者外层包裹的 div。
控制代码块高度的唯一可靠路径：用 包裹 + CSS 限制
多行代码必须放在 pre 里，再通过 CSS 控制其尺寸和溢出行为。关键点不是“怎么让 code 变矮”，而是“怎么让 pre 可控”。
-
pre默认是块级元素，支持max-height、overflow-y: auto等样式 - 必须同时设
overflow-x: auto，否则长行会撑破容器 - 推荐加
tab-size: 2或4，避免不同环境缩进错位 - 别依赖
pre的默认上下 margin，建议重置为margin: 0再统一由外层控制
示例结构：
<pre class="brush:php;toolbar:false;" style="max-height: 24rem; overflow-y: auto; overflow-x: auto; margin: 0; tab-size: 2;">
<code class="js">function hello() {
console.log("Hello, world");
// 更多行...
}</code>
如果用了高亮库（如 highlight.js），高度控制逻辑不变
highlight.js 等工具只读取 pre 下的 code 内容并重写 DOM，但不会改变容器层级。所以高度控制仍落在 pre 上，而不是高亮后生成的 span 堆叠层。
- 不要给高亮后的内部
span加max-height——它不生效，且可能破坏语法高亮结构 - 若需固定高度并居中显示（比如卡片内），对
pre外层div用display: flex; align-items: center更稳妥 - 注意：某些 UI 框架（如 AmazeUI）提供
.am-pre-scrollable类，默认设了max-height: 24rem，可直接复用
单行代码误用 height 的典型陷阱
有人把 npm install 这类命令包进 code 后强行加 height 和 overflow，结果发现：
- 文字垂直居中失效（行内元素无
vertical-align可靠方案） - 背景色上下留白不一致（受父级
line-height影响大） - 响应式缩放时高度崩坏（
em/rem单位在行内元素中计算不稳定）
正确做法：单行就老实用 code，需要控制尺寸就用 display: inline-block + padding + line-height，别碰 height。
最容易被忽略的是：高度限制必须配合 white-space: pre（已由 pre 继承）和 overflow-x 同时存在，缺一不可。只设 max-height 不加 overflow-y，内容会被裁掉且无滚动条；只加 overflow-y 不处理 overflow-x，横向溢出照样破坏布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
