code标签语义上专指行内计算机术语，不负责格式；需用code包裹函数、命令等单行术语，多行代码必须用pre包裹。
code 标签在帮助文档里不是“放代码的地方”，而是“指代代码的标点”——它不负责换行、缩进或高亮，只负责告诉浏览器：“这个词是计算机术语，别当普通文字读”。
什么时候必须用 code 而不是
你在段落中提一个函数、命令、属性或路径时，code 是唯一语义正确且排版安全的选择：
- ✅ 正确：
调用 <code>fetch()前需检查AbortSignal是否已中止 —— 两处fetch()和AbortSignal都是行内术语，用code包裹后字体等宽、基线对齐、屏幕阅读器读作“fetch 函数” - ❌ 错误：
<pre class="brush:php;toolbar:false;">fetch()</pre>——是块级元素，插在句子中间会撑开上下行距，导致段落错位、间距突兀
- ❌ 错误：
<button></button>没转义和 <code>>→ 浏览器解析成真实标签，后续 HTML 结构直接崩坏
code 的样式控制要点
默认样式太简陋，但加太多 CSS 又容易翻车。关键就三条：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须设
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace：比单纯monospace更稳，避免 macOS 和 Windows 渲染差异 - 禁用
white-space: pre：它会让长命令（如npm run build --if-present -- --config vite.config.prod.js）横向溢出容器，且破坏与周围文本的基线对齐 - 慎设
background或padding：如果全篇统一加背景色，连console.log()这种短词也会被染上灰底，视觉干扰大；真要强调，优先用color或border-bottom: 1px dashed
和 <code> 混用时的边界怎么划</code>
帮助文档里最常踩的坑，就是把“要不要保留格式”这个判断逻辑搞反了：
- ✅
code用于：useState、process.env.NODE_ENV、/src/utils/normalize.js—— 所有能塞进一句话里的、无换行需求的术语 - ✅
<code> 用于：<code>function debounce(fn, delay) { ... }</code>、Shell 脚本片段、JSON 配置块 —— 凡含换行、缩进、多行结构的，必须嵌套，且 <code>pre</code> 外层建议加 <code>overflow-x: auto</code></code> - ⚠️ 特别注意：
console.error('msg')是单行 → 用code；但展示它的完整调用栈（含多行堆栈）→ 必须<code>，否则所有换行被压平，错误定位失效</code>
真正难的是语义自觉：每次敲 code 前，先问自己一句——这段内容，离开原始换行和缩进还能准确传达意思吗？不能，就该进
<code>；能，才轮到 <code>code</code> 上场。</code>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
