有序列表
有序列表用来表达顺序:操作步骤、排查问题的先后、检查清单的优先级。和无序列表不同,它的编号不是装饰,而是一个被渲染器接管的信息——这带来一个反直觉但极其有用的特性:你写在源码里的数字会被忽略,真正显示出来的编号由渲染器按顺序生成。这一页讲清这条规则,以及它在什么时候帮了你、又会在什么时候坑你。
行首写数字、句点(或右括号)、一个空格,然后是内容:
1. 第一步
2. 第二步
3. 第三步
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
括号也可以换成右括号,1) 同样被识别为有序列表。
编号由渲染器接管
这是有序列表最值得记住的一点:源码里的数字不影响渲染结果。把上面那段写成 1. 1. 1. 也没问题,页面上依然是「第一步、第二步、第三步」。渲染器只关心「这是一个有序列表」和「列表项有几项」,编号自己算。
这条特性带来两个直接的好处。一是插入一项不用重排:在中间加一条新步骤,你只需要给它写任意一个编号,后面的编号会自己往下排。二是编号不会因为编辑而错位:删掉中间一条,剩下的编号自动收紧,不存在「1、2、4、5」这种需要手工修补的情况。
唯一的例外是第一个数字,它决定列表从几开始:
3. 第三步其实是第一步
4. 下一步
<ol start="3">
<li>第三步其实是第一步</li>
<li>下一步</li>
</ol>
打断段落的那条限制
有序列表可以打断它前面的普通段落,但前提是第一个编号是 1:
这是段落
2. 编号不是 1
<p>这是段落
2. 编号不是 1</p>
编号是 2 时,这一行会被当成段落的延续,列表根本没有生成。这条限制是为了避免正文里随手写的「2024. 年的计划」这类文字被误判成列表。只要以 1. 开头,列表就能正常打断段落。
| 写法 | 实际渲染 | 原因 |
|---|---|---|
1. 步骤 | 列表项 | 基本用法 |
1.步骤 | 普通文字 | 句点后必须有空格 |
1) 步骤 | 列表项 | 右括号也是合法标记 |
1. 1. 1. | 编号 1、2、3 | 编号由渲染器接管 |
段落后接 2. 步骤 | 普通文字 | 打断段落时首编号必须是 1 |
段落后接 1. 步骤 | 列表 | 首编号为 1 时可打断段落 |
源码里的编号会骗人。 因为渲染结果不看源码里的数字,你在源文件里看到的「1. 2. 3.」和页面上显示的编号可能对不上——一旦你在中间插了一条,页面上会自动重排,源码却还是老样子。所以不要依赖源码里的数字来沟通顺序,也不必为了「看起来整齐」去手工重排编号。
把下面这段内容改写成 Markdown,要求:四个步骤用一个有序列表表示;在第二步下面加一条子步骤,并把它缩进到正确的层级;第一个编号必须是 1,否则它无法打断前面的段落。
安装依赖
使用 pnpm install
配置环境变量
启动开发服务器
解题思路:
有序列表的编号由渲染器接管,源码里写什么数字都不影响最终显示,所以编号统一从 1 开始写即可——这同时满足了「能打断前面段落」的限制(首编号必须是 1)。子步骤要缩进到父项的内容起始列之后:2. 占三列,所以子项缩进三个空格。
详细步骤:
- 四个步骤各写成「数字 + 句点 + 空格 + 内容」的形式,编号依次写 1、2、3、4。实际上写出来的数字只是给人看的,渲染时会自动重排。
- 「使用 pnpm install」是第一步的子项,缩进三个空格再写
1. 使用 pnpm install。父项1.的内容从第四列开始,子项必须对齐到这一列或更右。 - 注意首编号必须是 1:如果写成
2. 安装依赖,这一行会被当成前面段落的延续,整个列表都不会生成。 - 检验:渲染后是一个从 1 开始编号的三步列表,第一步下面挂着一个子步骤。
最终答案:
1. 安装依赖
1. 使用 `pnpm install`
2. 配置环境变量
3. 启动开发服务器读完这一页,你应当能写出有序列表,能解释编号为什么由渲染器接管、能说出首编号的唯一作用,也能解释为什么编号不是 1 的列表无法打断前面的段落。接下来写步骤说明时,你会放心地在中间插入新步骤,而不再手工重排后面的数字。
