应使用而非包裹单行内嵌代码；需套以确保语义正确和高亮生效；常见错误包括未转义HTML字符、空格缩进无效、响应式失效。

什么时候该用

 而不是 <pre class="brush:php;toolbar:false;">？

单独一行内嵌代码片段（比如函数名、变量、命令）必须用 ，它语义正确、默认不换行、样式轻量。浏览器默认会给 加等宽字体和浅灰背景，适合穿插在段落中说明：console.log()、git commit -m、__init__.py。如果误用

 包裹单个词，会强制换行+缩进，破坏行文流，还可能被屏幕阅读器读作“预格式化块”，造成语义错误。

 里为什么还得套一层 <pre class="brush:php;toolbar:false;">？

HTML 规范允许但不强制

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

，但实际项目中强烈建议套用——因为  只保证空格/换行保留，不传达“这是代码”的语义；而  提供语义 + 默认样式增强。搜索引擎、语法高亮库（如 Prism.js）、辅助工具都依赖这层标记。常见写法是：def hello():\n    print("world")。漏掉  标签，Prism 可能无法自动触发 Python 高亮，或者某些 CSS 重置规则会意外抹掉  的等宽字体。

用  时容易踩的三个坑

直接把原始代码粘进去没转义 HTML 特殊字符：比如 <div> 会被浏览器解析为标签而非文本，必须先转义成 <div>；服务端渲染需用 escape 函数，静态页面可用在线工具或 VS Code 插件自动转换
用空格缩进却忘了  默认只认换行符，不认空格语义：4 个空格缩进在  中只是 4 个可见字符，不会被识别为“代码块缩进层级”，所以别指望它自动对齐或折叠；真正需要结构化缩进请用 tab-size CSS 属性控制显示宽度
响应式失效：未设 overflow-x: auto 或 white-space: pre-wrap，长代码行会撑破容器；推荐组合写法：...


要不要用第三方高亮库？什么情况下可以不用
纯展示、语言简单（如 HTML/XML/Shell 命令）、且不追求行号/复制按钮时，原生  足够：加几行 CSS 就能实现基础可读性。但一旦涉及 Python/JS/SQL 等多关键字语言，或需要支持 dark mode、键盘导航、无障碍焦点，就绕不开 Prism.js 或 highlight.js。注意：它们都要求  结构，且依赖  标签上的 language-xxx 类名（如 ）来判断语法类型；漏写类名，高亮就失效。</div>
</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！