HTML中code标签配合details折叠代码教程-html教程-PHP中文网

因为中未转义的会被浏览器解析为html标签，导致dom结构破坏；必须对特殊字符实体化（如<、>）或使用textcontent插入。

html中code标签配合details折叠代码教程

为什么直接写

<details><summary>...</summary><pre class="brush:php;toolbar:false;"><code>...</code>

浏览器会把 <code> 里的尖括号当 HTML 标签解析，导致内容截断或渲染异常。比如 <code>for (let i = 0; i 中的 <code> 会被当成标签起始符，后续文本可能直接消失。

必须对 、<code>>、& 做 HTML 实体转义：<、>、&
编辑器若为富文本（如 TinyMCE），默认会过滤 <pre class="brush:php;toolbar:false;"><code></code> 结构，需开启 <code>allowedContent</code> 或禁用 HTML 清洗</pre>
Markdown 编辑器（如 Obsidian、Typora）多数默认关闭原生 HTML，需显式启用，例如设 html: true 或使用 %%raw%% 包裹
服务端渲染（如 Hugo）可能自动转义，要用 {{ .RawHTML | safeHTML }} 或 {{}}...{{}} 绕过

<details></details> 本身不触发高亮，<code> 被折叠时，Prism.js / Highlight.js 通常跳过处理——即使 DOM 存在，但 display: none 或不可见状态会让高亮库忽略它。

<summary></summary> 必须是 <details></details> 的第一个子元素，否则折叠逻辑失效
<pre class="brush:php;toolbar:false;"></pre> 必须紧贴 <summary></summary> 后，中间不能有空格或换行文本节点（旧版 Safari 会因此不渲染）
给 <code> 加 class（如 class="js"），这是 Prism/Highlight.js 的语言识别依据
监听 toggle 事件，在展开后手动触发高亮：if (details.open && details.querySelector('code')) { Prism.highlightAll(); }

纯 JS 搜索过滤常遍历所有 <details></details> 并统一设 hidden 或切换 open，但用户正在查看的内容会被强制收起，体验断裂。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<summary></summary> 文本太短，容易漏掉关键信息。比如折叠区里写了 “useNavigate 替代了 useHistory”，但 summary 只是 “路由跳转”，直接搜 useNavigate 就找不到。

在 <details></details> 上加 data-keywords="react router usenavigate usehistory"，空格分隔，便于 .split(/\s+/)
没写 data-keywords 时，回退到拼接 <summary></summary> + 第一个子元素（如 <p></p> 或 <pre class="brush:php;toolbar:false;"></pre>）的 textContent
别把长段落或敏感字段塞进 data-keywords，它只用于快速模糊匹配，不是存储正文的替代方案
输入框加防抖（如 setTimeout(..., 300)），避免每敲一个字就重算一次 DOM