Task list
Plugin for rendering GitHub-style task list syntax as disabled checkboxes.
The comark/plugins/task-list plugin converts GitHub-style task list syntax into disabled checkboxes. It runs before inline parsing to prevent Comark from misinterpreting [ ] and [x] as component syntax.
The plugin is enabled by default via registerDefaultPlugins. No installation or registration required.
Usage
import { parseMarkdown } from 'comark'
const result = await parseMarkdown(`
- [x] Write the docs
- [ ] Fix the bug
- [x] Ship it
`)Explicit registration is only needed when default plugins are disabled:
import { parseMarkdown } from 'comark'
import taskList from 'comark/plugins/task-list'
const result = await parseMarkdown(content, {
registerDefaultPlugins: false,
plugins: [taskList()]
})Features
Syntax
Use [ ] for unchecked and [x] (or [X]) for checked items inside a list:
- [x] Completed task
- [ ] Pending task
- [X] Also completed (case-insensitive)Task lists also work in nested lists:
- [x] Parent task
- [x] Sub-task done
- [ ] Sub-task pending
- [ ] Another parent taskCSS classes
The plugin adds classes to help with styling:
| Element | Class |
|---|---|
<ul> containing tasks | contains-task-list |
<li> with a checkbox | task-list-item |
<input> checkbox | task-list-item-checkbox |
.task-list-item {
list-style: none;
}
.task-list-item-checkbox {
margin-right: 0.5em;
}API
taskList()
Returns a ComarkPlugin that converts task list syntax to disabled checkboxes. Takes no options.
Returns: ComarkPlugin