markdeep-viewer.html

<canvas hidden id='canvas' width='800' height='800'></canvas>
<div id='result'></div>
<div id='png-container'></div>

<script>

var arr=document.currentScript.parentElement.querySelectorAll('.bullet');
for (var i=0;i<arr.length;i++){
arr[i].innerHTML=arr[i].innerHTML
    .replace(/^(\s*)(\&gt\;|\&lt\;|[\!,\@,\#,\%]*)(\[x\]|\[ \]|\(x\)|\( \)|-) /gm,function(match,p1,p2,p3){
switch(p3){
  case '[x]': 
    return p1+ '+ <label>' + p2 + '</label><input type="checkbox" class="box" checked></input>';
  case '[ ]': 
    return p1+ '+ <label>' + p2 + '</label><input type="checkbox" class="box"></input>';
  case '(x)': 
    return p1+ '+ <label>' + p2 + '</label><input type="checkbox" class="circle" checked></input>';
  case '( )': 
    return p1+ '+ <label>' + p2 + '</label><input type="checkbox" class="circle"></input>';  
  case '-':
   return p1 + '+ -<label>' + p2 + '</label>';
  default:
    return match;
}
})   
;
}
</script>

<style>
.bullet > ul {position:relative;}
.bullet li {position:static;}
.bullet label {
  font-family: Menlo;
  background:#fff;
  position: absolute;
  left:0em;
}
.bullet > ul {padding-left:20px;}
.bullet input[type=checkbox] {
        width: 1em;
	height: 1em;
        margin-top: 0em;
        margin-bottom: 0em;
        border: #666 thin;
        border-style:solid;
	-webkit-appearance: none;
;}
.bullet input[type=checkbox].circle {border-radius: 100px;}
.bullet input[type=checkbox]:checked {background: #70a0ff;}
.bullet li {list-style-type:none;}
</style>
<script>
window.history.pushState({},"", "/?");
window.markdeepOptions = {mode: 'markdeep'};
window.alreadyProcessedMarkdeep=false;
</script>
<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/0.19/markdeep.js"></script>
<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

<div style="opacity:0.2;position:fixed; margin:.3em; bottom:0em; right:0em;"><small>Inspired by <a href="http://www.squarefree.com/">Jesse Ruderman</a> and hosted by <a href="http://tomberek.info/markdeep.html">tomberek</a>.</small></div>