是行内元素，浏览器折叠空白符致缩进换行丢失；必须嵌套于中，前者保格式，后者表语义，且需设class="xxx"供高亮库识别。
<code> 标签本身不构建页面，它只语义化一段内联代码；真要分享代码，得靠它和 <pre class="brush:php;toolbar:false;"></pre> 配合，再加点样式和结构。
为什么单用 <code> 会丢失缩进和换行
<code> 是行内元素，浏览器会像处理 <span></span> 一样折叠空白符：多个空格变一个，换行被忽略，缩进全消失。你贴一段 Python，缩进一塌糊涂，直接报错。
- 正确做法是外层套
<pre class="brush:php;toolbar:false;"></pre>—— 它保留所有空白和换行 <code>放在<pre class="brush:php;toolbar:false;"></pre>里，提供语义（“这是代码”，不是普通预格式文本）- 例如：
<pre class="brush:php;toolbar:false;"><code class="python">def hello():<br> print("world")</code>
怎么让不同语言的代码有语法高亮
<code> 不自带高亮，但它是高亮库（如 Prism.js、highlight.js）识别语言的入口——关键看 class 或 data-language 属性。
- Prism.js 依赖
class="xxx"，比如class="js"、class="bash" - highlight.js 也认
class="xxx"，还支持class="hljs"+ 自动检测（但不准，建议显式声明） - 别写
class="python"，必须是language-python，否则库不触发
复制按钮怎么加才不破坏语义和可访问性
直接在 <code> 上放按钮会污染语义，而且屏幕阅读器可能读错。稳妥做法是把按钮放在 <pre class="brush:php;toolbar:false;"></pre> 外部或内部右上角定位区，用 aria-label 注明功能。
- 按钮
aria-label写清楚动作和目标，比如aria-label="复制 Python 代码" - 复制后最好给视觉反馈（如 tooltip 显示 “已复制”），且持续时间别太短（至少 2 秒）
- 避免监听
<code>的点击事件来触发复制——用户可能只是想选中某几行，不是全复制
真正麻烦的不是标签怎么写，而是换行符兼容性、Tab 宽度不一致、长代码水平滚动体验、以及移动端双击缩放导致代码被切掉——这些都得靠 CSS 和 JS 补位，<code> 只是个起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
