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 + '\n' + startatt = ordered && start !== 1 ? ' start="' + start + '"' : '', + className = containsTaskList ? ' class="contains-task-list"' : '' + return '<' + type + startatt + className + '>\n' + body + '\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/) 高亮显示,示例代码: