@soulnote/markdown-it-tasks
v1.5.0
Published
A markdown-it plugin that adds tasks(todo/doing/done...) function.
Maintainers
Readme
🚧 This project is under active development. APIs and features may change at any time. Feedback and contributions are welcome!
A powerful, flexible, and beautiful plugin for markdown-it that brings tasks to your Markdown documents. Supports multiple task states (TODO, DOING, DONE, CANCELLED, IMPORTANT, OPTIONAL...) with customizable rendering.
✨ Features
- ✔️ Task Syntax: Add todo, doing, done, cancelled, and important tasks in Markdown.
- 🎨 Customizable: Change class names and rendering templates easily.
- 🧩 Seamless Integration: Works out-of-the-box with markdown-it.
- 🛡️ TypeScript Support: Fully typed for safe and modern development.
🚀 Installation
npm install @soulnote/markdown-it-tasks
# or
yarn add @soulnote/markdown-it-tasks
# or
pnpm add @soulnote/markdown-it-tasks📝 Usage
import MarkdownIt from "markdown-it";
import { Tasks } from "@soulnote/markdown-it-tasks";
const md = new MarkdownIt().use(Tasks());
const html = md.render("[ ] todo item");
console.log(html);Rendered Output
<span class="md-tasks"
><input type="checkbox" disabled /><span>TODO</span>Write documentation</span
>
<span class="md-tasks"
><input type="checkbox" disabled checked /><span>DONE</span>Release
package</span
>
<span class="md-tasks"
><input type="checkbox" disabled /><span>DOING</span>Working on new
feature</span
>
<span class="md-tasks"
><input type="checkbox" disabled checked /><span>CANCELLED</span>Dropped
idea</span
>
<span class="md-tasks"
><input type="checkbox" disabled /><span>IMPORTANT</span>Urgent fix</span
>✅ Supported Task Types
| Markdown Syntax | State |
| --------------- | --------- |
| [ ] or | TODO |
| [x] or [X] | DONE |
| [~] | DOING |
| [-] | CANCELLED |
| [!] | IMPORTANT |
| [>] | OPTIONAL |
⚙️ Advanced Usage
Custom Class Name & Rendering
const md = new MarkdownIt().use(
Task({
className: "my-task",
render_open: '<custom class="my-task-open">',
render_close: "</custom>",
})
);
md.render("[ ] Custom render");
// <custom class="my-task-open">Custom render</custom>🤝 Contributing
Contributions, issues and feature requests are welcome! Feel free to check issues page or submit a pull request.
📄 License
MIT © mjrt
