表格中嵌入代码需转义html字符、禁用tab缩进、设vertical-align:top和margin:0、加overflow-x:auto及white-space:pre-wrap防溢出错位。
表格里直接塞<pre class="brush:php;toolbar:false;">会错位
在 <td> 或 <code><th> 里直接写 <code><pre class="brush:php;toolbar:false;"><code></code>，常出现缩进塌陷、横向溢出、上下间距异常——因为表格单元格默认不继承 <code><pre class="brush:php;toolbar:false;"></pre> 的块级行为，且 CSS 层叠容易被表格样式覆盖。
- 必须给
<td> 或 <code><th> 加 <code>vertical-align: top，否则<pre class="brush:php;toolbar:false;"></pre>的默认基线对齐会让内容“悬空” -
<pre class="brush:php;toolbar:false;"></pre>需显式设margin: 0，否则表格单元格内自带的 padding +<pre class="brush:php;toolbar:false;"></pre>默认 margin 叠加，导致高度失控 - 长代码行会撑破
<td> 宽度，必须配 <code>overflow-x: auto在<pre class="brush:php;toolbar:false;"></pre>上，而不是父表格或单元格 - 别用
white-space: pre-wrap替代<pre class="brush:php;toolbar:false;"></pre>—— 表格单元格里它无法可靠保留缩进层级，尤其 Python/YAML 等依赖空格的语法 - 别依赖 Markdown 渲染器或 CMS 自动转义 —— 它们通常跳过
<pre class="brush:php;toolbar:false;"></pre>内容，只处理正文 - 如果代码本身含 HTML 实体（如
©），要双重转义：先转义实体符号，再转义尖括号，否则©会被解析成 © 符号，再被当作文本渲染
HTML 特殊字符不转义就崩
表格单元格中嵌入代码时，、<code>>、& 不转义，浏览器会尝试解析成标签，轻则内容截断，重则破坏整个表格结构。比如 <tr> 出现在 <code><td> 里，可能被当成新行开始。
<ul>
<li>所有代码内容必须提前转义：<code> → <code><，> → >，& → &
多行代码缩进必须用空格
表格单元格宽度有限，Tab 缩进在不同环境宽度不一致（4px vs 8px），会导致代码列错位、对齐失效，尤其对比相邻两列代码时更明显。
- 统一用 2 或 4 个空格缩进，禁用 Tab 键
- 检查编辑器设置：VS Code 要关掉 “Insert Spaces”，Sublime Text 确保 “Indent Using Spaces” 开启
- 若从终端复制代码，先粘贴到纯文本编辑器（如 Notepad++）清理 Tab，再转义后填入
<pre class="brush:php;toolbar:false;"><code></code></pre>
表格响应式下代码块变窄怎么办
小屏设备上，表格常横向滚动，但 <pre class="brush:php;toolbar:false;"></pre> 默认不换行，代码被截断或触发整页横向滚动——用户得左右拖很久才能看清一行。
- 给
<pre class="brush:php;toolbar:false;"></pre>加white-space: pre-wrap，它比pre多支持自动折行，且保留换行和空格 - 配合
word-break: break-all防止超长无空格字符串（如 base64、URL）撑爆容器 - 避免设固定
width，用max-width: 100%让代码块随单元格收缩 - 如果必须保持原始缩进不可折行，就只加
overflow-x: auto，并确保父<td> 有 <code>min-width: fit-content，防止被压缩到看不见滚动条 真正麻烦的是混合场景：比如一列放命令npm run build（该用<code>），另一列放对应输出日志（该用<pre class="brush:php;toolbar:false;"><code></code>），稍不注意就混用标签或漏转义，结果页面结构突然错乱。</pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
