正确做法是用 position: absolute; left: -9999px; top: -9999px; 将代码块移出视口，既隐藏又保留 DOM 结构、样式计算和语法高亮功能，避免 display: none、visibility: hidden、opacity: 0 或 hidden 属性导致高亮失效或兼容问题。
HTML代码块怎么隐藏但保留语法高亮
直接用 display: none 会干掉整个 <pre><code> 块，连带高亮样式也消失——这不是“隐藏代码”，是“删掉代码”。真想藏又不破坏渲染，得从 CSS 作用域和 DOM 可见性两个层面动手。
常见错误现象：visibility: hidden 看似可行，但光标还能聚焦、屏幕阅读器仍可读、getBoundingClientRect() 返回非零尺寸，某些编辑器插件（比如 Prism 的行号插件）还会因元素“存在但不可见”报错或错位。
- 正确做法：用
position: absolute; left: -9999px; top: -9999px;把代码块移出视口，同时保持 DOM 结构和样式计算完整 - 如果依赖
Prism.js，必须确保移出前已完成Prism.highlightAll()，否则移走后执行会失败（DOM 节点虽在，但脱离文档流可能影响getComputedStyle调用） - 避免用
opacity: 0：部分语法高亮库靠颜色对比度检测主题，透明度归零可能触发 fallback 样式或降级渲染
为什么 <pre> 里套 <code> 不能直接加 hidden 属性
hidden 是全局 HTML 属性，对 <pre> 生效没问题，但它会阻止子元素（包括 <code>）的任何渲染行为，导致 Prism / Highlight.js 等库无法注入 <span> 标签做着色——你看到的是纯文本，不是“隐藏了的高亮代码”。
使用场景：需要动态切换显示/隐藏（比如折叠代码块），且后续可能调用 Prism.highlightElement() 重刷。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用类名控制，比如
class="code-block-hidden"配合pre.code-block-hidden { position: absolute; clip: rect(0 0 0 0); } -
clip已废弃，但clip-path: inset(100%)在 Safari 15.4+ 才稳定，老版本建议回退到position移出法 - 注意：
inset(100%)对<pre>内部行高、padding 敏感，若代码块有line-height: 1.2或padding: 1em，可能漏出边缘
Prism.js 动态隐藏后如何安全重新高亮
一旦代码块被移出视口或 display 切换，Prism 不会自动重绘。强行调用 Prism.highlightElement(el) 可能报错："Cannot read property 'textContent' of null"——因为 el 的 textContent 在移出后被某些浏览器清空或冻结。
参数差异：传入原生 <code> 元素比传 <pre> 更稳妥，Prism 内部对前者有更健壮的文本提取逻辑。
- 安全重亮步骤：先确认
el.parentElement.style.position !== 'absolute'（即已移回文档流），再el.textContent = el.textContent强制刷新文本缓存，最后调用Prism.highlightElement(el) - 不要用
Prism.highlightAll()全局重刷：它会遍历所有pre code，包括那些本该隐藏的，浪费性能且可能干扰其他模块 - 如果用了
prism-themes，注意主题 CSS 是通过<link>加载的，隐藏期间不会卸载，但切换主题时需手动触发Prism.plugins.NormalizeWhitespace重算缩进
服务端渲染（SSR）下隐藏代码块的兼容陷阱
Next.js / Nuxt 等框架中，<pre><code> 在服务端已由 Prism 处理过，客户端 hydrate 时若直接加隐藏样式，可能造成水合不一致（hydration mismatch），React 报 Warning: Prop `className` did not match。
性能影响：服务端生成的高亮 HTML 体积大，隐藏后仍占用网络带宽和内存，尤其长代码块（>100 行）。
- 解决方案：服务端不运行 Prism，只输出原始
<code>文本；客户端首次加载完成后再判断是否需显示，再调用Prism.highlightElement() - 用
useEffect+useState控制显示状态，避免 SSR 渲染出隐藏态却客户端显示——这样水合才一致 - 路径注意：
prismjs/components/prism-javascript.min.js比全量包小 60%，按需引入语言支持，否则隐藏代码块也会拖慢首屏 JS 解析
最易被忽略的一点：CSS 中对 pre code 设置的 font-family 和 tab-size，在隐藏状态下仍参与 layout 计算。如果页面有大量隐藏代码块，tab-size: 4 可能让渲染引擎多做几十次字符宽度测量——别小看这几十毫秒，它会影响 LCP。
