Fix #17

- vertical align of checkbox

still some style problem, but ... anyway

doc/README.md

@@ -30,6 +30,9 @@ var y = 3
 
 - [ ] a
 - [x] b
+- I am just a simple list
+- [x] checked
+- [ ] not checked
 
 ## Contribute
 

lib/renderer/toc-renderer.js

@@ -19,12 +19,14 @@ TocRenderer.prototype.heading = function (text, level) {
 };
 
 // TODO: move the to do list render to another file
-TocRenderer.prototype.listitem = function(text) {
+TocRenderer.prototype.listitem = function (text) {
     if (/^\s*\[[x ]\]\s*/.test(text)) {
         text = text
-            .replace(/^\s*\[ \]\s*/, '<input type="checkbox" disabled>')
-            .replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked disabled>');
-        return '<li class="check-list-item">' + text + '</li>';
+            .replace(/^\s*\[ \]\s*/,
+            '<input type="checkbox" class="task-list-item-checkbox" disabled>')
+            .replace(/^\s*\[x\]\s*/,
+            '<input type="checkbox" class="task-list-item-checkbox" checked disabled>');
+        return '<li class="task-list-item">' + text + '</li>';
     } else {
         return '<li>' + text + '</li>';
     }

public/assets/style/bundle.css

@@ -35,6 +35,12 @@ ul {
   width: 70%;
   height: 100%;
   overflow: auto; }
+  .markdown-content li.task-list-item {
+    list-style: none; }
+    .markdown-content li.task-list-item .task-list-item-checkbox {
+      margin: 0 0.35em 0.25em -1.6em;
+      vertical-align: middle;
+      cursor: default; }
 
 .markdown-toc {
   position: fixed;

views/assets/style/layout.scss

@@ -48,6 +48,18 @@ ul{
     height: 100%;
 
     overflow: auto;
+
+    li.task-list-item {
+        list-style: none;
+
+        .task-list-item-checkbox {
+          // copied from github...
+          margin: 0 0.35em 0.25em -1.6em;
+          vertical-align: middle;
+          // otherwise the cursor would show a forbidden icon
+          cursor: default;
+        }
+    }
 }
 
 .markdown-toc{