UI: task list checkboxes in the editor's theme

lib/renderer.js

@@ -56,9 +56,15 @@ var render = function (text, filePath) {
 
     renderer = new marked.Renderer()
     renderer.listitem = function (text, isTask) {
-      const listAttributes = isTask ? ' class="task-list-item"' : ''
+      if (isTask) {
+        const textOnly = text.replace(/^<input .*">/, '').trim()
+        const isChecked = /checked=""/.test(text)
 
-      return `<li ${listAttributes}>${text}</li>\n`
+        const checkbox = `<input class="input-checkbox" type="checkbox" disabled ${isChecked ? 'checked' : ''}>`
+        return `<li class="task-list-item">${checkbox} ${textOnly}</li>\n`
+      }
+
+      return `<li>${text}</li>\n`
     }
   }
 

styles/markdown-preview-default.less

@@ -154,3 +154,40 @@
   }
 
 }
+
+// Align task list checkboxes --------------------
+.checkbox-position(@x, @y, @margin: 0) {
+  .markdown-preview:not([data-use-github-style]) {
+    .task-list-item .input-checkbox {
+      position: absolute;
+      transform: translate(~"calc(-50% - @{x})", ~"calc(-50% + @{y})");
+    }
+
+    .task-list-item {
+      margin: @margin 0 !important;
+    }
+  }
+}
+
+
+.checkbox-position(13px, 10px);
+
+.theme-atom-dark-ui, .theme-atom-light-ui {
+  .checkbox-position(13px, 10px, .1em);
+}
+
+.theme-atom-material-ui {
+  .checkbox-position(15px, 9px, .4em);
+}
+
+.theme-nucleus-dark-ui {
+  .checkbox-position(14px, 12px);
+}
+
+.theme-solarized-dark-ui {
+  .checkbox-position(13px, 9px, .1em);
+}
+
+.theme-solarized-light-ui {
+  .checkbox-position(14px, 12px, .1em);
+}

styles/markdown-preview-github.less

@@ -37,4 +37,16 @@
     border-radius: 4px;
     overflow: auto;
   }
+
+  .task-list-item input[type=checkbox] {
+    margin: 0 .5em .25em -1.6em;
+    vertical-align: middle;
+    height: initial; width: initial;
+
+    -webkit-appearance: checkbox;
+
+    &::before, &:after {
+      display: none;
+    }
+  }
 }

styles/markdown-preview.less

@@ -19,12 +19,7 @@
     user-select: auto;
   }
 
-  // move task list checkboxes
-  .task-list-item input[type=checkbox] {
-    position: absolute;
-    margin: .25em 0 0 -1.4em;
-  }
-
+  // remove task list bullets
   .task-list-item {
     list-style-type: none;
   }