配置对照 <CodeDiff />

左右两个代码窗格：左边旧写法（改动行划掉），右边新写法（改动行铺强调色），底部 2–3 条说明。

Template and style descriptions are currently available in Chinese only.

Group: 变化 · 同一份配置的前后写法
Component: CodeDiff · #code-diff
Interaction: 两个窗格依次滑入，代码逐行淡入。

Good for

配置文件、代码片段从旧格式换成新格式
两段写法等价，想让听众逐行对照

Avoid when

只是几项设置的值变了：用 CompareTable
代码超过 8 行：截取关键部分，或拆成两页

Content limits

1	before / after 各 2–8 行，每行 ≤ 52 个字符
2	label ≤ 12 字；file 写完整路径
3	mark 是从 0 开始的行号
4	notes 2–3 条：key ≤ 12 个字符（等宽），text ≤ 30 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`before` · required	`{ label, file, lines, mark? }`	旧写法窗格
`after` · required	`{ label, file, lines, mark? }`	新写法窗格
`notes`	`{ key, text }[]`	底部说明

Example

<CodeDiff
  kicker="APT 源格式"
  title="一行源，变成一段源"
  before={{ label: '单行格式 · 已弃用', file: '/etc/apt/sources.list', lines: ['deb https://repo.example.org/lumen aurora contrib'], mark: [0] }}
  after={{ label: 'deb822 格式', file: '/etc/apt/sources.list.d/lumen.sources', lines: ['Types: deb', 'URIs: https://repo.example.org/lumen', 'Suites: aurora', 'Components: contrib'], mark: [0, 1, 2, 3] }}
  notes={[{ key: 'apt modernize-sources', text: '发行说明推荐用这条命令迁移。' }]}
  source="sources.list(5) · aurora 发行说明 §4.7"
/>