markdown-it-colorful-checkbox v1.0.2

markdown-it-colorful-checkbox

Beautiful checkbox

Examples

.task-list
  list-style: none;
  padding-left: 0;

.c-checkbox
  background-color: #fff;
  border: solid 1px #000000;
  border-radius: 4px;
  display: inline-block;
  height: 16px;
  margin-right: 6px;
  margin-left: 2px;
  text-align: center;
  width: 16px;
  vertical-align: middle;

.c-svg
  margin-bottom: 5px;
  stroke: #fff;
  width:12px;
  height:12px;

.c-positive
  background-color: #4aca65;
  border-color: #43b45b;

.c-negative
  background-color: #b8b7b7;
  border-color: #6d6d6d;

var plg = require('markdown-it-colorful-checkbox');
var md = require('markdown-it')().use(plg);

var result = md.render('# Hi!\n- [x] ABC\n- [-] DEF');

console.log(result);

Result:

<h1>Hi!</h1>
<ul class="task-list">
<li class="task-list-item"><span class="c-checkbox c-positive"><svg class="c-svg" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.9375%"><path d="M2 20 L12 28 30 4" /></svg></span>ABC</li>
<li class="task-list-item"><span class="c-checkbox c-negative"><svg class="c-svg" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.9375%"><path d="M2 30 L30 2 M30 30 L2 2" /></svg></span>DEF</li>
</ul>