Task List

The comark/plugins/task-list plugin converts GitHub-style task list syntax into interactive checkboxes. It runs before inline parsing to prevent Comark from misinterpreting [ ] and [x] as component syntax.

Usage

import { parse } from 'comark'
import taskList from 'comark/plugins/task-list'

const result = await parse(`
- [x] Write the docs
- [ ] Fix the bug
- [x] Ship it
`, {
  plugins: [taskList()]
})

With framework components:

<script setup lang="ts">
import { Comark } from '@comark/vue'
import taskList from '@comark/vue/plugins/task-list'
</script>

<template>
  <Comark :plugins="[taskList()]">{{ content }}</Comark>
</template>

import { Comark } from '@comark/react'
import taskList from '@comark/react/plugins/task-list'

<Comark plugins={[taskList()]}>{content}</Comark>

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:

.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 checkboxes. Takes no options.

Returns: ComarkPlugin