<details>标签本身不支持内联样式或语法高亮，需配合<pre>及CSS类或Prism.js等库实现；手写<span>适合简单场景，自动高亮更推荐且需注意DOM加载与可访问性细节。
details 标签本身不支持内联样式或语法高亮
<details> 是语义化折叠容器，它只负责展开/收起行为，内部内容完全由你控制。想让代码段带多色标记（比如关键字红色、字符串蓝色），不能靠 <details> 自身实现，得靠它包裹的代码展示方案——最直接的是用 <pre><code> 配合 CSS 类或第三方库。
用 pre + code + 手写 CSS 实现基础多色标记
适合简单场景（比如几处关键词高亮），不用引入额外依赖。关键点是：把要着色的部分用 <span> 包裹，并加类名；<pre> 保留换行和空格，<code> 提供语义。
- 必须给
<pre>设置white-space: pre; overflow-x: auto;，否则换行失效或长行溢出 - 不要在
<code>上直接写内联样式，用 class 更易维护 - 关键词如
function、return、const可单独加class="keyword"，再用 CSS 定义颜色 - 示例片段：
<details> <summary>点击查看 JS 示例</summary> <pre><code class="js">const <span class="keyword">sum</span> = <span class="keyword">function</span>(<span class="param">a</span>, <span class="param">b</span>) {<br> <span class="keyword">return</span> <span class="number">1</span> + <span class="number">2</span>;<br>};</code></pre> </details>对应 CSS：.keyword { color: #d73a49; } .param { color: #6f42c1; } .number { color: #005cc5; }
用 Prism.js 或 Highlight.js 做自动语法高亮（推荐）
手写 <span> 很快就不可维护，尤其代码段变长或语言变多时。Prism.js 更轻量、零配置即可用，且支持 <details> 无缝嵌套。
- 引入 Prism 的 CSS 和 JS（CDN 即可，注意顺序：先 CSS 后 JS）
- 给
<code>加上class="javascript"（或其他语言标识） - 确保
<code>在<pre>内，且没被其他标签打断结构 - Prism 会在 DOM 加载后自动解析，但若
<details>默认关闭，部分旧版 Prism 可能跳过未显示的代码块 —— 解决办法是手动触发：在details[open]事件里调用Prism.highlightAll() - 示例 JS 补丁：
document.querySelectorAll('details').forEach(d => { d.addEventListener('toggle', () => { if (d.open) { Prism.highlightAllUnder(d); } }); });
容易忽略的兼容性与性能细节
折叠代码块不是纯视觉问题，实际会影响渲染和可访问性。
立即学习“前端免费学习笔记（深入）”；
-
<details>在 IE 中完全不支持，如需兼容，得降级为 JS 控制的display: none/block切换 - 大段代码（>100 行）+ Prism 高亮可能造成首次展开卡顿，可考虑懒加载：只在用户点击后再加载 Prism 脚本，或用
async+defer - 屏幕阅读器对
<details><summary>支持良好，但若你在<summary>里塞了图标或复杂 HTML，记得加aria-label明确说明作用 - 别忘了给
<code>设置tabindex="0"，方便键盘用户聚焦并复制代码
真正麻烦的从来不是“怎么加颜色”，而是“怎么让颜色在折叠/展开/复制/缩放/读屏时都不崩”。动手前先想清楚目标环境和用户路径。
