diff --git a/docs/de-de/helpers.md b/docs/de-de/helpers.md
index 8cfe310c1..dd808044e 100644
--- a/docs/de-de/helpers.md
+++ b/docs/de-de/helpers.md
@@ -56,3 +56,23 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 [link](/demo ":target=_blank")
 [link](/demo2 ":target=_self")
 ```
+
+
+## Github Task Lists
+
+```md
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
+```
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
diff --git a/docs/helpers.md b/docs/helpers.md
index ae6db8e34..575cd0db8 100644
--- a/docs/helpers.md
+++ b/docs/helpers.md
@@ -62,3 +62,23 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 ```md
 [link](/demo ":disabled")
 ```
+
+## Github Task Lists
+
+```md
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
+```
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
+
diff --git a/docs/zh-cn/helpers.md b/docs/zh-cn/helpers.md
index eec202670..26d266118 100644
--- a/docs/zh-cn/helpers.md
+++ b/docs/zh-cn/helpers.md
@@ -56,3 +56,23 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set ti
 [link](/demo ":target=_blank")
 [link](/demo2 ":target=_self")
 ```
+
+
+## Github Task Lists
+
+```md
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
+```
+
+* [ ] foo
+ * bar
+ * [x] baz
+ * [] bam
+   * [ ] bim
+   * [ ] lim
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 6bc68b2ea..914250534 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -175,6 +175,15 @@ export class Compiler {
       return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
     }
 
+    const CHECKED_RE = /^\[([ x])\] +/
+    origin.listitem = renderer.listitem = function (text) {
+      const checked = CHECKED_RE.exec(text)
+      if (checked) {
+        text = text.replace(CHECKED_RE, `<input type="checkbox" ${checked[1] === 'x' ? 'checked' : ''} />`)
+      }
+      return `<li>${text}</li>\n`
+    }
+
     renderer.origin = origin
 
     return renderer
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index 6663e1b90..1e75caf47 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -91,6 +91,11 @@ kbd {
   vertical-align: middle;
 }
 
+li input[type=checkbox] {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
 /* navbar */
 .app-nav {
   left: 0;
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 846d416ce..e7ce2eb82 100644
--- a/src/themes/vue.css
+++ b/src/themes/vue.css
@@ -100,9 +100,7 @@ body {
 }
 
 .markdown-section figure,
-.markdown-section p,
-.markdown-section ul,
-.markdown-section ol {
+.markdown-section p {
   margin: 1.2em 0;
 }