标签仅提供语义和等宽字体，无背景、圆角等卡片样式；需用 或外层 包裹并配合 css 实现代码卡片，注意换行、溢出、复制按钮位置及语法高亮等细节。
code 标签本身不支持样式卡片，得靠 CSS 包裹
<code> 是纯语义标签，浏览器默认只加等宽字体和轻微内边距，没有背景、圆角、阴影这些「卡片感」。想做出代码卡片，必须用 <pre class="brush:php;toolbar:false;"></pre> 或外层 <div> 包住它，并手动加 CSS。
<p>常见错误是直接给 <code><code> 加 background 和 padding，结果换行失效、空格塌陷、长代码溢出——因为 <code> 是行内元素，不处理块级排版。
- 正确做法：用
<pre class="brush:php;toolbar:false;"><code>...</code> 组合，<code><pre class="brush:php;toolbar:false;"></pre> 保留空白符和换行，<code> 表明语义
- 更灵活的做法：用
<div class="code-card">
<code>...，然后通过 CSS 控制 display: block、white-space: pre-wrap 等行为
- 别忘了设
font-family: ui-monospace, SFMono-Regular, 'Segoe UI Mono', monospace，否则 Windows 下可能 fallback 到难看的 Courier
复制按钮要挂载在 code 卡片外部，不能 inside code
把复制按钮塞进 <code> 标签里会导致 HTML 结构非法（<code> 只允许文本节点），而且会破坏代码高亮或预格式化效果。
实际做法是让按钮作为兄弟元素，用 flex 或 grid 布局对齐：
HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载
<div class="code-card">
<div class="code-card-header">
<span>index.js</span>
<button onclick="copyCode(this)">复制</button>
</div>
<pre class="brush:php;toolbar:false;"><code class="js">console.log('hello');</code>
- 复制逻辑里，要通过
this.parentElement.nextElementSibling.querySelector('code') 找到目标 <code>，而不是 this.parentNode 里硬挖
- 按钮点击后建议加短暂视觉反馈（比如文字变「已复制」2 秒），否则用户不确定是否成功
- 移动端注意按钮尺寸，
min-width: 56px 和 padding: 4px 12px 比较稳妥
长代码水平滚动必须显式控制 overflow-x
很多人以为 <pre class="brush:php;toolbar:false;"></pre> 天然支持横向滚动，其实不然——默认 overflow: visible，长行直接撑破容器、破坏布局。
- 关键 CSS 必须写全：
overflow-x: auto + overflow-y: hidden（避免意外纵滚）+ max-width: 100%
- 别只设
white-space: pre，它会让所有空格和换行原样保留，但不解决折行问题；需要折行时改用 pre-wrap，再配合 word-break: break-word
- 滚动条样式在不同系统差异大，如需统一，可用
scrollbar-width: thin（Firefox）和 ::-webkit-scrollbar（Chrome/Safari），但别强求隐藏——可访问性要求可见滚动提示
语法高亮不要依赖 code 标签 class，要用 JS 库或构建时处理
<code class="py"> 这种写法只是约定，浏览器根本不识别 language-py，也不会自动上色。真要高亮，得引入 Prism.js、highlight.js，或用构建工具（如 remark-shiki）预渲染。
- Prism 最简集成：引入 CSS + JS，再调用
Prism.highlightAll()，它会自动找 class="language-*" 的 <code> 并处理
- 注意加载时机——如果
<code> 是异步插入（比如 Markdown 渲染后），得手动调用 Prism.highlightElement(el)
- 服务端渲染场景下，前端高亮可能造成 FOUC（闪动），建议优先用 shiki 或 rust-based 方案做静态生成
真正卡住人的地方往往不是怎么加样式，而是没意识到 <code> 本身什么都不会做——它只是个路标，后面所有视觉效果、交互、可访问性，都得你一条条补全。
