Markdown Task Lists to HTML Checkboxes

Task Lists in Markdown (GFM)

Task lists are a GitHub Flavored Markdown (GFM) extension that creates checkbox items. They are built on top of unordered lists with a special bracket syntax.

Basic Task List

- [x] Write the introduction
- [x] Add code examples
- [ ] Review and edit
- [ ] Publish the post

Converts to:

<ul>
  <li><input type="checkbox" checked disabled> Write the introduction</li>
  <li><input type="checkbox" checked disabled> Add code examples</li>
  <li><input type="checkbox" disabled> Review and edit</li>
  <li><input type="checkbox" disabled> Publish the post</li>
</ul>

• [x] produces a checked checkbox (checked attribute).
• [ ] produces an unchecked checkbox.
• The disabled attribute prevents interaction in static HTML output. On platforms like GitHub, the checkboxes are interactive.

Nested Task Lists

Task lists can be nested like regular lists:

- [x] Backend
  - [x] Database schema
  - [x] API endpoints
  - [ ] Authentication
- [ ] Frontend
  - [ ] UI components
  - [ ] State management

This creates nested <ul> elements with checkboxes at each level, making it ideal for breaking down complex tasks into subtasks.

Task Lists with Other Content

You can include links, inline code, and emphasis within task list items:

- [x] Install `node.js`
- [ ] Configure **environment variables**
- [ ] Deploy to [Vercel](https://vercel.com)

Styling Considerations

Since the rendered HTML uses standard <input type="checkbox"> elements, you can style them with CSS. Many sites hide the default checkbox and replace it with custom SVG icons or styled pseudo-elements for a polished look.