diff --git a/src/css/markdown.css b/src/css/markdown.css
index b0ddc72a..328e2dfd 100644
--- 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
index 3b33731f..c80205e1 100644
--- a/src/utils/marked.js
+++ b/src/utils/marked.js
@@ -1017,14 +1017,15 @@ Renderer.prototype.hr = function() {
return this.options.xhtml ? '
\n' : '
\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 '' + text + '\n'
+Renderer.prototype.listitem = function(text, task) {
+ return `` + text + '\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
index b85503b5..66539e67 100644
--- 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
index e92101b8..7877a02a 100644
--- 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/) 高亮显示,示例代码: