samp默认等宽因浏览器用户代理样式设为monospace，但无语法高亮能力，不处理换行缩进，须与pre配合使用以保留格式并明确语义。
为什么 samp 默认是等宽字体，但不能靠它做代码高亮
samp 的等宽表现来自浏览器默认样式表（user agent stylesheet），不是语义要求——它只是“恰好”被设为 font-family: monospace。这意味着：
• 你删掉所有 CSS，samp 仍显示为等宽，但颜色、行高、背景全是默认的灰扑扑状态
• 它不支持语法高亮：没有 token 切分逻辑，<samp>console.log("hello")</samp> 里字符串和函数名全是一种颜色
• 不会自动处理缩进或换行：单行 samp 没问题，多行输出必须配合 pre 才能保留空格和回车
用 samp 展示终端输出时，pre 不是可选项
真实命令行输出必然含换行、缩进、制表符，而 samp 是内联元素，会把所有空白压缩成单个空格。
正确结构只能是：
<pre class="brush:php;toolbar:false;"><samp>npm install<br>+ express@4.18.2<br>added 42 packages</samp>
要点：
•
pre 负责保留格式，samp 负责声明语义• 不要写成
<samp><pre class="brush:php;toolbar:false;">...</pre></samp> —— 语义颠倒，pre 本意是“预格式化文本”，不是“输出容器”• 如果内容来自 API 响应体（比如 JSON），且需用户复制，优先用
code + pre，因为那是人写的结构化数据，不是程序“吐出来”的原始流
samp 和 code 混用时最容易翻车的三个地方
视觉相似，语义天差地别，一错就影响可访问性和工具链：
• 把 curl -X GET https://api.example.com 这种命令写进 samp —— 错，这是用户输入，该用 kbd
• 把 TypeError: Cannot read property 'data' of undefined 这种错误栈整个包进 code —— 错，这是运行结果，该用 samp
• 在文档中写 “调用 fetch() 后返回 {"id": 1}”，却把 fetch() 也塞进 samp —— 错，函数名是代码，JSON 字符串才是输出，必须拆开
暗色主题下 samp 内容看不清？别硬调 color
很多开发者发现深色背景配默认等宽字体，文字发灰甚至透明，第一反应是加 style="color: #e6e6e6;"。但问题不在颜色：
• 真正原因是浏览器对 samp 的默认 color 值在暗色模式下未适配（比如设为 rgb(100, 100, 100)）
• 更稳妥的做法是用 prefers-color-scheme 媒体查询统一控制：
@media (prefers-color-scheme: dark) {<br> samp { color: var(--text-primary); }<br>}
• 避免直接在 HTML 里写内联 style，否则无法被主题系统接管
• 如果用的是 CSS-in-JS 或组件库，确认其是否将
samp 视为“文本类元素”纳入主题变量体系——多数框架默认忽略它前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
