Use a checkbox input element to render checkboxes. (#102)

Remove checked, unchecked class from li; this is no longer needed.
We still need custom CSS on ul.task-list to remove the redundant list markers.

src/html.ts

@@ -211,9 +211,16 @@ class HTMLRenderer {
         return this.inTags("li", node, 2);
 
       case "task_list_item":
-        return this.inTags("li", node, 2,
-                           { class: node.checkbox === "checked"
-                               ? "checked" : "unchecked" });
+        let result = "<li>\n";
+        if (node.checkbox === "checked") {
+          result += '<input disabled="" type="checkbox" checked=""/>\n';
+        } else {
+          result += '<input disabled="" type="checkbox"/>\n';
+        }
+        result += this.renderChildren(node);
+        result += this.renderCloseTag("li");
+        result += "\n";
+        return result;
 
       case "definition_list_item":
         return this.renderChildren(node);

test/task_lists.test

@@ -3,10 +3,12 @@
 - [x] checked item
 .
 <ul class="task-list">
-<li class="unchecked">
+<li>
+<input disabled="" type="checkbox"/>
 an unchecked task list item
 </li>
-<li class="checked">
+<li>
+<input disabled="" type="checkbox" checked=""/>
 checked item
 </li>
 </ul>
@@ -20,11 +22,13 @@ checked item
 * [x] checked item
 .
 <ul class="task-list">
-<li class="unchecked">
+<li>
+<input disabled="" type="checkbox"/>
 <p>an unchecked task list item</p>
 <p>with two paragraphs</p>
 </li>
-<li class="checked">
+<li>
+<input disabled="" type="checkbox" checked=""/>
 <p>checked item</p>
 </li>
 </ul>