动态高亮需适配DOM结构、字体尺寸、行高、容器宽度及滚动定位；必须用requestAnimationFrame延迟hljs.highlightElement()调用，避免样式未生效导致渲染错误。
动态高亮本身不“自适应”，真正需要适配的是高亮后的 DOM 结构、字体尺寸、行高、代码块容器宽度，以及滚动定位逻辑——否则在小屏上代码被截断、文字挤成一团、高亮色块溢出、甚至 hljs 无法正确计算行号宽度，都是常见结果。
hljs.highlightElement() 必须配合容器重绘触发
流式插入 Markdown 代码块后，若直接调用 hljs.highlightElement()，但此时 <pre class="brush:php;toolbar:false;"><code></code> 还没完成 CSS 布局（比如父容器 <code>max-width</code> 未生效、<code>font-size</code> 正在响应式计算中），Highlight.js 可能按错误尺寸渲染行号或裁剪内容。</pre>
- 务必等元素插入 DOM 后，再用
requestAnimationFrame延迟一次调用，确保样式已应用 - 如果代码块嵌套在
display: flex或grid容器中，且该容器设置了overflow: hidden，先临时移除再恢复，避免高亮后内容被裁掉 - 对每个新插入的
<code>元素单独调用hljs.highlightElement(codeEl)，不要依赖hljs.highlightAll()——后者只扫描初始 DOM，不感知动态节点
代码块容器必须用 max-width + overflow-x:auto 而非 width:100%
固定 width: 100% 在小屏上会让代码块强行拉伸、文字换行错乱；而不用 max-width 又可能在桌面端撑破布局。关键不是“让代码块变小”，而是“让它可横向滚动”。
- 给
<pre class="brush:php;toolbar:false;"></pre>设置max-width: 100%和overflow-x: auto，同时加white-space: pre保持原始缩进 - 禁用
word-wrap: break-word（默认可能开启），否则 JSON 或路径类代码会被强制折行，破坏语义 - 移动端需额外加
-webkit-overflow-scrolling: touch提升滚动顺滑度（iOS Safari）
字体与行高要用 rem + clamp() 动态缩放
代码高亮的可读性极度依赖字号和行高比例。用固定 px 值，在 iPhone SE 和 iPad Pro 上体验天壤之别；用纯 em 又容易受父级干扰失控。
立即学习“前端免费学习笔记（深入）”；
- 根元素
html的font-size推荐用clamp(12px, 1.25rem, 16px)：下限保小屏可读，上限防桌面端过大 <code>内部用font-size: 0.9em，确保它始终相对于容器字号缩放，而非全局- 行高设为无单位值如
line-height: 1.4，避免在不同字号下比例失衡 - 注意：Highlight.js 默认会往
<code>插入<span></span>，这些内联元素继承line-height，所以必须从祖先统一控制
最易被忽略的一点：当代码块高度随字体缩放变化时，页面滚动定位（比如锚点跳转或滚动高亮导航）的 getBoundingClientRect() 值会偏移。如果你同时做了“滚动高亮对应导航项”，必须在字体尺寸变更后手动触发一次位置重算，否则高亮错位会持续存在。这不是 bug，是响应式与动态渲染叠加后的必然副作用。
