1. markdown-it-task-checkbox
A markdown-it plugin to create GitHub-style task lists
markdown-it-task-checkbox
Package: markdown-it-task-checkbox
Created by: linsir
Last modified: Sun, 19 Jun 2022 16:09:41 GMT
Version: 1.0.6
License: ISC
Downloads: 27,447
Repository: https://github.com/linsir/markdown-it-task-checkbox

Install

npm install markdown-it-task-checkbox
yarn add markdown-it-task-checkbox

markdown-it-task-checkbox

A markdown-it plugin to create GitHub-style task lists

Modified from https://github.com/mcecot/markdown-it-checkbox and https://github.com/revin/markdown-it-task-lists

Usage

Install

node.js:

 npm install markdown-it-task-checkbox --save

Use

 var md = require('markdown-it')()
            .use(require('markdown-it-checkbox'),{
              disabled: true,
              divWrap: false,
              divClass: 'checkbox',
              idPrefix: 'cbx_',
              ulClass: 'task-list',
              liClass: 'task-list-item'
            });

md.render('- [x] unchecked') // =>
// <ul class="task-list">
//  <li class="task-list-item">
//     <div classname="checkbox">
//       <input type="checkbox" id="cbx_0" checked="true" disabled="true">
//       <label for="cbx_0">unchecked</label>
//     </div>
//  </li>
// </ul>

Differences in browser. If you load script directly into the page, without
package system, module will add itself globally as window.markdownitCheckbox.

Options

disabled

  • Type: Boolean
  • Default: true

if the value is true, the checkbox can not be selected.

divWrap

  • Type: Boolean
  • Default: false

wrap div arround checkbox. this makes it possible to use it for example with Awesome Bootstrap Checkbox.

divClass

  • Type: String
  • Default: checkbox

classname of div wrapper. will only be used if divWrap is enanbled.

idPrefix

  • Type: String
  • Default: cbx_

the id of the checkboxs input contains the prefix and an incremental number starting with 0. i.e. cbx_1 for the 2nd checkbox.

ulClass

  • Type: String
  • Default: task-list

classname of ul wrapper.

liClass

  • Type: String
  • Default: task-list-item

classname of li wrapper.

THANKS

https://github.com/mcecot/markdown-it-checkbox and https://github.com/revin/markdown-it-task-lists

License

MIT License © 2016 Linsir

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin