feat: improve gfm task list support

egoist · Dec 28, 2018 · 915dbcb · 915dbcb
1 parent 2fe7c15
commit 915dbcb
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/src/css/markdown.css b/src/css/markdown.css
@@ -173,6 +173,11 @@
     margin: 1rem 0;
   }
 
+  & .contains-task-list {
+    list-style: none;
+    padding-left: 0;
+  }
+
   & img {
     max-width: 100%;
   }

diff --git a/src/utils/marked.js b/src/utils/marked.js
@@ -1017,14 +1017,15 @@ Renderer.prototype.hr = function() {
   return this.options.xhtml ? '<hr/>\n' : '<hr>\n'
 }
 
-Renderer.prototype.list = function(body, ordered, start) {
+Renderer.prototype.list = function(body, ordered, start, containsTaskList) {
   var type = ordered ? 'ol' : 'ul',
-    startatt = ordered && start !== 1 ? ' start="' + start + '"' : ''
-  return '<' + type + startatt + '>\n' + body + '</' + type + '>\n'
+    startatt = ordered && start !== 1 ? ' start="' + start + '"' : '',
+    className = containsTaskList ? ' class="contains-task-list"' : ''
+  return '<' + type + startatt + className + '>\n' + body + '</' + type + '>\n'
 }
 
-Renderer.prototype.listitem = function(text) {
-  return '<li>' + text + '</li>\n'
+Renderer.prototype.listitem = function(text, task) {
+  return `<li${task ? ' class="task-list-item"' : ''}>` + text + '</li>\n'
 }
 
 Renderer.prototype.checkbox = function(checked) {
@@ -1310,19 +1311,25 @@ Parser.prototype.tok = function() {
     case 'list_start': {
       body = ''
       var ordered = this.token.ordered,
-        start = this.token.start
+        start = this.token.start,
+        containsTaskList = false
 
       while (this.next().type !== 'list_end') {
+        if (this.token.task) {
+          containsTaskList = true
+        }
         body += this.tok()
       }
 
-      return this.renderer.list(body, ordered, start)
+      return this.renderer.list(body, ordered, start, containsTaskList)
     }
+    // @modified
     case 'list_item_start': {
       body = ''
       var loose = this.token.loose
+      const isTask = this.token.task
 
-      if (this.token.task) {
+      if (isTask) {
         body += this.renderer.checkbox(this.token.checked)
       }
 
@@ -1331,7 +1338,7 @@ Parser.prototype.tok = function() {
           !loose && this.token.type === 'text' ? this.parseText() : this.tok()
       }
 
-      return this.renderer.listitem(body)
+      return this.renderer.listitem(body, isTask)
     }
     case 'html': {
       // TODO parse inline content if parameter markdown=1

diff --git a/website/docs/guide/markdown-features.md b/website/docs/guide/markdown-features.md
@@ -12,6 +12,8 @@ A document is represented in Markdown format:
 The content goes here...
 ```
 
+Internally we use the blazing-fast [marked](https://marked.js.org) to parse Markdown, so almost all [GitHub Flavored Markdown](https://github.github.com/gfm/) features are supported. 
+
 Check out the introduction for [Markdown](https://daringfireball.net/projects/markdown/) if you're not sure what it is.
 
 ## Links
@@ -51,6 +53,22 @@ __Output__:
 - [Docute website](https://docute.org)
 - [Docute repo](https://github.com/egoist/docute)
 
+## Task List
+
+__Input__:
+
+```markdown
+- [ ] Rule the web
+- [x] Conquer the world
+- [ ] Learn Docute
+```
+
+__Output__:
+
+- [ ] Rule the web
+- [x] Conquer the world
+- [ ] Learn Docute
+
 ## Code Highlighting
 
 Code fences will be highlighted using [Prism.js](https://prismjs.com/), example code:

diff --git a/website/docs/zh/guide/markdown-features.md b/website/docs/zh/guide/markdown-features.md
@@ -50,6 +50,22 @@ __输出__：
 - [Docute website](https://docute.org)
 - [Docute repo](https://github.com/egoist/docute)
 
+## 任务列表
+
+__输入__:
+
+```markdown
+- [ ] Rule the web
+- [x] Conquer the world
+- [ ] Learn Docute
+```
+
+__输出__:
+
+- [ ] Rule the web
+- [x] Conquer the world
+- [ ] Learn Docute
+
 ## 代码高亮 Highlighting
 
 代码框使用 [Prism.js](https://prismjs.com/) 高亮显示，示例代码：