diff --git a/editor/src/editor.js b/editor/src/editor.js
index 11efa59..fbf8a8d 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -239,6 +239,7 @@ function Editor(holder, input) {
         }
 
         let converted = text
+        let todo;
 
         if (converted === '{{table}}') {
             transformTable.call(this, editor, id, element);
@@ -258,14 +259,20 @@ function Editor(holder, input) {
                 converted = '**[[' + res[1] + ']]**: ' + res[2]
             } else if (text.match(/#\[\[TODO]]/)) {
                 converted = converted.replace('#[[TODO]]', '<input class="checkbox" type="checkbox" />')
+                todo = true;
             } else if (text.match(/#\[\[DONE]]/)) {
                 converted = converted.replace('#[[DONE]]', '<input class="checkbox" type="checkbox" checked />')
+                todo = false;
             }
             MD.options.html = true
             converted = MD.renderInline(converted)
             MD.options.html = false
         }
 
+        if (todo !== undefined) {
+            element.toggleClass('todo--done', todo === false)
+            element.toggleClass('todo--todo', todo === true)
+        }
         element.html(converted)
     }
 
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index b47db94..28035e2 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -457,3 +457,11 @@ input.input-line, input.input-line:active {
     width: 400px;
   }
 }
+
+.todo--todo {
+}
+.todo--done {
+  text-decoration: line-through;
+  text-decoration-skip: leading-spaces;
+  color: #999;
+}