任务列表
任务列表是复选框在 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 只描述文档的内容结构,不提供交互能力;渲染出来的 <input type="checkbox" disabled> 只是状态的呈现,不是控件。读者在网页上无法勾选任务——这份清单只能靠人去改源码来更新。
如果你的文档需要一个真能点的清单,那就得用渲染器提供的交互组件(比如某些站点主题自带的任务清单插件),而不是指望 Markdown 语法本身。
把下面这段内容改写成 Markdown,要求:用任务列表表示三项待办,其中第一项标记为已完成;在「写文档」下面挂两个子任务,一个已完成、一个未完成。
写文档
收集资料(已完成)
校对(未完成)
发布
解题思路:
任务列表就是在无序列表项前面加一对方括号,[ ] 表示未选中、[x] 表示已选中,两个方括号后都要跟一个空格。子任务用普通列表的缩进规则,跟着父项再缩进两格。
详细步骤:
- 三项顶层任务各写成
-加方括号加空格:[ ]或[x]。第一项「写文档」已完成,写成- [x] 写文档;后两项未完成,写成- [ ]。 - 两个子任务缩进两个空格,缩进量由父项的内容起始列决定:
-占两列,所以子项对齐到第 3 列。 - 「收集资料」标为已完成用
[x],「校对」保持未完成用[ ]。大小写不敏感,但同一份文档里保持一致更好读。 - 检验:渲染后是三个带复选框的任务项,第一项的框是选中的,「写文档」下面挂着两个缩进的子任务。
最终答案:
- [x] 写文档
- [x] 收集资料
- [ ] 校对
- [ ] 发布读完这一页,你应当能写出未选中和已选中的两种任务项,能解释 ] 后那个空格为什么不能省,能把子任务按正确的缩进挂到父任务下面,也能说清渲染出来的复选框为什么点不动。接下来写检查清单时,你会用它来表达「状态」,而不是指望读者在网页上直接勾选。
