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 task

CSS classes

The plugin adds classes to help with styling:

ElementClass
<ul> containing taskscontains-task-list
<li> with a checkboxtask-list-item
<input> checkboxtask-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