任务列表

任务列表是复选框在 Markdown 里的样子:- [ ] 表示待办,- [x] 表示已完成。它和普通列表的差别只有那两个方括号,但正因为是扩展语法,它在各个平台上的支持度并不一致——这一页要讲清它的准确写法、嵌套怎么表达,以及一个更要紧的问题:这些复选框能不能点。

语法

在列表项的开头加上一对方括号,里面放一个空格表示未选中,放一个 x 表示已选中:

- [ ] 待办 1
- [x] 已完成 2
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled> 待办 1</li>
<li class="task-list-item"><input type="checkbox" checked disabled> 已完成 2</li>
</ul>

渲染出来就是列表项前面多了一个复选框。x 用大写写成 X 效果相同。用有序标记 1. [ ] 也能得到任务列表,不过任务清单通常用无序标记更合适。

空格不能省

] 后面必须有一个空格,否则这一项不会被识别成任务,退化成普通列表项:

- [ ] 是任务
- [ ]不是任务
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled> 是任务</li>
<li>[ ]不是任务</li>
</ul>

和列表标记后面那个空格是同一条规则:标记符号必须和内容分开,否则解析器分不清你是在写标记还是在写正文。

嵌套任务

任务列表可以像普通列表一样嵌套,子任务的复选框会跟着缩进:

- [ ] 写文档
  - [x] 收集资料
  - [ ] 校对
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled> 写文档
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> 收集资料</li>
<li class="task-list-item"><input type="checkbox" disabled> 校对</li>
</ul>
</li>
</ul>

任务列表同样能放进引用块里,缩进规则和普通列表一致。

常见坑

写法实际渲染原因
- [ ] 待办未选中的复选框基本用法
- [x] 完成已选中的复选框x 不区分大小写
- [ ]待办普通列表项] 后必须有空格
1. [ ] 待办也是任务列表有序、无序两种标记都支持
渲染出来点不动无法勾选复选框是禁用状态

练习

把下面这段内容改写成 Markdown,要求:用任务列表表示三项待办,其中第一项标记为已完成;在「写文档」下面挂两个子任务,一个已完成、一个未完成。

写文档
  收集资料(已完成)
  校对(未完成)
发布
嵌套子任务

解题思路: 任务列表就是在无序列表项前面加一对方括号,[ ] 表示未选中、[x] 表示已选中,两个方括号后都要跟一个空格。子任务用普通列表的缩进规则,跟着父项再缩进两格。

详细步骤:

  1. 三项顶层任务各写成 - 加方括号加空格:[ ] 或 [x]。第一项「写文档」已完成,写成 - [x] 写文档;后两项未完成,写成 - [ ]。
  2. 两个子任务缩进两个空格,缩进量由父项的内容起始列决定:- 占两列,所以子项对齐到第 3 列。
  3. 「收集资料」标为已完成用 [x],「校对」保持未完成用 [ ]。大小写不敏感,但同一份文档里保持一致更好读。
  4. 检验:渲染后是三个带复选框的任务项,第一项的框是选中的,「写文档」下面挂着两个缩进的子任务。

最终答案:

- [x] 写文档
  - [x] 收集资料
  - [ ] 校对
- [ ] 发布

小结

读完这一页,你应当能写出未选中和已选中的两种任务项,能解释 ] 后那个空格为什么不能省,能把子任务按正确的缩进挂到父任务下面,也能说清渲染出来的复选框为什么点不动。接下来写检查清单时,你会用它来表达「状态」,而不是指望读者在网页上直接勾选。

发现内容有问题?

告诉我们哪里需要改进。