用 标签包裹 api 路径最稳妥，语义清晰、可选中、无障碍友好；分段标记需按逻辑单元（如版本、资源名、参数）拆分，避免无意义拆分斜杠；css 应加 class 限定样式，动态段用 data-kind 属性标识，禁用 white-space: nowrap。
HTML里怎么给API路径加高亮样式
直接用 <code> 标签包裹路径最稳妥，别用 <pre class="brush:php;toolbar:false;"></pre> 或 <div> 模拟，否则语义丢失、复制体验差、屏幕阅读器识别异常。
<p>常见错误是把整个 URL 当成纯文本塞进 <code><span></span> 里，结果搜索爬虫抓不到端点结构，开发者复制时还带空格或换行。
-
<code>/api/v2/users/—— 正确：语义清晰、默认等宽、可选中、无障碍友好 - 用
style="background:#eee"硬套在<span></span>上 —— 错误：丢失代码语义，CSS 覆盖后可能破坏内联样式继承 - 对长路径手动换行（比如在
/后加<wbr></wbr>）—— 不必要：现代浏览器对<code>内的斜杠天然支持断行，加了反而干扰复制
路径分段标记要不要用多个 套嵌
要，但只在需要单独控制某一段样式或行为时才拆。比如版本号、资源名、ID 占位符，各自有不同交互需求（如点击跳转、hover 提示、禁用复制）。
不分段的坏处：想让 v2 变蓝、{id} 加虚线底，就得靠 CSS 选子字符串 —— 不可靠，且无法适配 RTL 文本或字体连字。
- 分段示例：
<code>/api/v2/users/{id} - 分段前提：每段本身是逻辑单元（如固定前缀、可变版本、资源名、参数占位符）
- 不推荐：
<code>/api/v2/… —— 斜杠不是独立语义单位，拆开反而破坏可读性
CSS怎么让路径高亮更实用
重点不是“好看”，而是“好用”：能一眼区分静态部分和动态部分，复制时不带多余空格或符号，小屏下不溢出。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
别用全局 code { background: #f5f5f5 } —— 它会污染所有代码块，包括行内变量名、函数调用等。
- 加 class 限定：
<code class="api-path">/api/v2/users/{id}，再写.api-path { font-family: ui-monospace, monospace; padding: 2px 6px; border-radius: 3px; } - 动态段用
data-kind="param"属性：<code data-kind="param">{id}，方便 JS 绑定 tooltip 或替换逻辑 - 避免
white-space: nowrap—— 小屏会横向滚动，改用overflow-wrap: break-word更安全
服务端渲染或 Markdown 里怎么保持语义
如果路径来自 API 响应或 Markdown 解析，别依赖 JS 动态加 <code> —— 首屏渲染慢、SEO 不友好、无 JS 时完全失效。
Markdown 渲染器（如 remark）默认把反引号内容转成 <code>，但注意它不会自动识别路径结构。需预处理或用插件提取端点。
- 服务端模板（如 EJS、Jinja）中，显式输出：
<code>，而非拼接字符串 - 用
marked时，配合renderer.code钩子，对匹配^/api/的代码块自动加class="api-path" - 警惕：某些 CMS 导出的 HTML 会把
/api/v2自动转成链接，但 href 是相对路径或漏协议 —— 检查生成结果，手动修正比事后 JS 修复更可靠
真正麻烦的是路径里混着查询参数或 fragment（比如 /search?q=foo#results），<code> 能包住，但语义上 query 和 hash 已不属于“端点路径”主干。这时候得靠上下文说明，而不是强行用样式区分。
