code标签仅用于语义化单行内联代码，如命令、参数或变量名；多行代码、配置文件、终端输出等必须用pre+code嵌套结构，前者保留格式，后者声明语义。
code 标签不是代码块容器，它只负责语义化单行内联代码——用错地方，排版就崩。
什么时候该用 code，而不是 pre + code
在软件使用指南里，code 只适合嵌在句子中解释命令、参数或变量名。它不保留换行、缩进、连续空格，浏览器会把它当普通文字压缩处理。
- ✅ 正确场景：写“执行
git commit -m "init"提交更改”——整句是自然段落，git commit -m "init"是其中的一个操作单元 - ❌ 错误场景：把整个 Shell 脚本塞进
code里，比如#!/bin/bash echo "hello"→ 渲染成一行，且#!/bin/bash echo "hello" - ⚠️ 常见翻车点：用户复制粘贴终端输出时，直接把带缩进的多行日志包进
code，结果所有层级塌平，JSON 或 YAML 结构完全不可读
pre + code 嵌套才是多行代码的唯一合法结构
软件指南中展示配置文件、函数定义、CLI 输出等，必须用 pre 包裹 code。前者锁住格式（空格、换行、缩进），后者声明语义（这是代码，不是普通预格式文本）。
- ✅ 正确写法：
npm init -y npm install axios --save
——pre保换行，code告诉高亮库这是 Bash，也方便屏幕阅读器识别 - ❌ 错误写法：
npm init -y npm install axios --save
→ 搜索引擎无法判断这是代码，语法高亮库不触发，读屏器读作“预格式化文本” - ❌ 错误写法：
npm init -y npm install axios --save→ 所有换行丢失，变成npm init -y npm install axios --save - ⚠️ 注意：HTML 特殊字符必须转义，
、<code>>、&一个都不能漏，否则<script></script>会被解析为真实标签，后续 DOM 全乱
CSS 控制 pre + code 的关键样式项
没样式也能显示，但可读性差。几个必须设的 CSS 属性，直接决定用户是否愿意看下去：
-
pre必须加overflow-x: auto，否则长命令（如带完整路径的curl -X POST https://api.example.com/v1/users?include=profile&limit=100）直接撑破容器 -
code必须设display: block，否则它作为行内元素，不响应pre的宽高和滚动控制 - 字体链建议写全：
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace，避免某些系统 fallback 到非等宽字体 - 别给
code单独加white-space: pre——它已从pre继承，重复设置可能干扰层叠，导致基线偏移或折行异常
容易被忽略的混用边界：命令 vs 输出 vs 配置
同一份指南里，三类内容语义不同，标签选择不能一锅端：
- 命令本身（用户要敲的）：用
code行内包裹，如 “运行docker build -t myapp .” - 终端输出（程序返回的）：用
pre+code，并加class="text"或class="output"显式区分，避免高亮库误判为可执行代码 - 配置片段（如
package.json片段）：必须用pre+code，且 JSON 内容里的引号、逗号、缩进一个都不能少，否则用户复制即报错 - ⚠️ 真正难的是：有人把
console.log()单独包一层pre，有人把整段错误栈塞进code。记住唯一判断标准——要不要保留原始换行和缩进。要，就上pre；只是提个名字，code就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
