Core Plugins
Task List
Plugin for rendering interactive checkboxes from GitHub-style task list syntax.
The 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.
Basic Usage
With Parse API
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 Vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import taskList from 'comark/plugins/task-list'
</script>
<template>
<Comark :plugins="[taskList()]">{{ markdown }}</Comark>
</template>
With React
import { Comark } from '@comark/react'
import taskList from 'comark/plugins/task-list'
function App() {
return (
<Comark plugins={[taskList()]}>{markdown}</Comark>
)
}
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 CSS 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 |
Example styles:
.task-list-item {
list-style: none;
}
.task-list-item-checkbox {
margin-right: 0.5em;
}