<code>标签无法实现代码对比，因其仅为行内语义化元素，不支持换行、缩进保留或diff逻辑；需配合<pre>保格式、CSS控制布局与等宽字体才能实现基础并排对比。
<code> 标签本身不支持对比功能，它只是语义化标记内联代码片段。真要做代码对比，得靠结构设计 + CSS 控制 + 内容组织，而不是指望 <code> 自带差异高亮或并排布局。
为什么直接套用 <code> 无法实现对比
<code> 是行内元素，天生不换行、不撑开容器、不保留缩进，更不会识别 diff 逻辑。常见错误是这样写：
<p><code>console.log('old');</code></p>
<p><code>console.log('new');</code></p>
结果是两段代码上下堆叠，无视觉区分，空格和换行全被浏览器合并。它只负责“这是代码”，不负责“这是哪版代码”。
用 <code> 搭配 <pre> 实现基础并排结构
真正可行的最小对比方案：用 <pre> 保格式，<code> 做语义标注，再用 CSS 并排定位。关键点：
立即学习“前端免费学习笔记（深入）”；
-
<pre>必须包裹<code>，否则缩进和换行丢失 - 两组
<pre><code>需用display: inline-block或flex并排，不能只靠<br>或空格 - 字体必须用等宽（如
font-family: monospace），否则对齐错乱 - 避免在
<code>内写 HTML 实体（如），应直接使用原始字符，否则渲染异常
示例结构：
<div class="diff-view">
<pre><code class="lang-js">function add(a, b) {
return a + b;
}</code></pre>
<pre><code class="lang-js">const add = (a, b) => a + b;</code></pre>
</div>
加简单样式让对比可读（不依赖 JS 库）
纯 CSS 能做到基础区分，重点在三处：
- 左右两侧加不同背景色：
.diff-view pre:first-child { background: #f5f5f5; }，pre:last-child { background: #eef7ff; } - 加边框和间距：
pre { border: 1px solid #ddd; padding: 12px; margin: 0 8px; } - 强制等宽字体且禁换行：
code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; white-space: pre; }
注意：不要给 <code> 设 display: block，它本就是行内元素，设了反而破坏 <pre> 的继承行为。
容易被忽略的兼容性坑
真实项目里常栽在这几个点上：
-
<pre>在 Safari 旧版本中对white-space: pre解析不稳定，建议补white-space: pre-wrap回退 - 如果代码含 Tab 字符，不同浏览器缩进宽度不一致，统一转成 2 或 4 个空格再放入
<code> - 移动端小屏下并排会溢出，需加
@media (max-width: 768px) { .diff-view { flex-direction: column; } } -
<code>不支持语法高亮——要加颜色得手动包<span class="keyword">function</span>，或者引入 Prism.js 等库，但那就超出<code>本身能力了
最简可用的对比视图，核心就三点：用 <pre> 锁格式、用 CSS 控布局、别把 <code> 当容器使。其余高亮、折叠、行号，都得另起炉灶。
