代码批注 <CodeCallouts />

深色代码窗带行号，被批注的行右侧有编号圆点，右栏是对应编号的说明；每一步点亮一条说明和它的行。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 技术 · 逐行讲一段代码
Component: CodeCallouts · #code-callouts
Interaction: build 模式下每按一次 → 点亮下一条说明和它对应的行；未讲到的行仍可读

Good for

讲一段配置、SQL、脚本里的关键几行
每条说明对应明确的行

Avoid when

要对比改动：用 CodeDiff
要演示命令和输出：用 Terminal

Content limits

1	code 4–12 行，每行 ≤ 52 个字符
2	file ≤ 20 个字符
3	notes 2–4 条：title ≤ 10 字，body ≤ 40 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`code` · required	`string[]`	代码，每项一行
`file`	`string`	窗口标题
`notes` · required	`{ lines: number[], title, body }[]`	批注，lines 从 1 开始
`sql`	`boolean`	是否高亮 SQL 关键字，默认 true

Example

<CodeCallouts kicker="可扩展性" title="…" file="postgis.sql" code={['CREATE EXTENSION postgis;', …]} notes={[{ lines: [1], title: '加载扩展', body: '…' }, …]} />