Skip to content

Commit

Permalink
Github Task Lists
Browse files Browse the repository at this point in the history
Add support for Github Task Lists under the gfm flag.

Changes to API

* list(*string* body, *boolean* ordered, *boolean* taskList)
* listitem(*string* text, [*boolean* checked]).

`checked` is defined when you have a list item which starts with `[ ] ` or
`[x] `.If defined its a boolean depending on whether the `x` is
present. When checked is defined we add a input type type `checkbox` to
the list item and add the class `task-list-item-checkbox`.

`taskList` is true if a list has any list items where `checked` is
defined. When true we add the class `task-list` to the list.

Resolves markedjs#107
  • Loading branch information
jhollingworth authored and gilbert committed Sep 8, 2016
1 parent 38f1727 commit bf39349
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 11 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,8 @@ This code will output the following HTML:
- html(*string* html)
- heading(*string* text, *number* level)
- hr()
- list(*string* body, *boolean* ordered)
- list(*string* body, *boolean* ordered, *boolean* taskList)
- `taskList` true when `gfm` is `true` and there is a list item with a check box
- listitem(*string* text)
- paragraph(*string* text)
- table(*string* header, *string* body)
Expand All @@ -211,7 +212,8 @@ This code will output the following HTML:
- codespan(*string* code)
- br()
- del(*string* text)
- link(*string* href, *string* title, *string* text)
- link(*string* href, *string* title, *string* text, [*boolean* checked]).
- `checked` only defined when `gfm` is `true` and there is a check box at the start of the list item (e.g. `* [ ] foo`).
- image(*string* href, *string* title, *string* text)

### gfm
Expand Down
48 changes: 39 additions & 9 deletions lib/marked.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ var block = {
text: /^[^\n]+/
};

block.checkbox = /^\[([ x])\] +/;
block.bullet = /(?:[*+-]|\d+\.)/;
block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
block.item = replace(block.item, 'gm')
Expand Down Expand Up @@ -157,7 +158,8 @@ Lexer.prototype.token = function(src, top, bq) {
, item
, space
, i
, l;
, l
, checked;

while (src) {
// newline
Expand Down Expand Up @@ -304,6 +306,17 @@ Lexer.prototype.token = function(src, top, bq) {
space = item.length;
item = item.replace(/^ *([*+-]|\d+\.) +/, '');

if (this.options.gfm) {
checked = block.checkbox.exec(item);

if (checked) {
checked = checked[1] === 'x';
item = item.replace(block.checkbox, '');
} else {
checked = undefined;
}
}

// Outdent whatever the
// list item contains. Hacky.
if (~item.indexOf('\n ')) {
Expand Down Expand Up @@ -333,6 +346,7 @@ Lexer.prototype.token = function(src, top, bq) {
}

this.tokens.push({
checked: checked,
type: loose
? 'loose_item_start'
: 'list_item_start'
Expand Down Expand Up @@ -809,13 +823,23 @@ Renderer.prototype.hr = function() {
return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
};

Renderer.prototype.list = function(body, ordered) {
Renderer.prototype.list = function(body, ordered, taskList) {
var type = ordered ? 'ol' : 'ul';
return '<' + type + '>\n' + body + '</' + type + '>\n';
var classes = taskList ? ' class="task-list"' : '';
return '<' + type + classes + '>\n' + body + '</' + type + '>\n';
};

Renderer.prototype.listitem = function(text) {
return '<li>' + text + '</li>\n';
Renderer.prototype.listitem = function(text, checked) {
if (checked === undefined) {
return '<li>' + text + '</li>\n';
}

return '<li class="task-list-item">'
+ '<input type="checkbox" class="task-list-item-checkbox"'
+ (checked ? ' checked' : '')
+ '> '
+ text
+ '</li>\n';
};

Renderer.prototype.paragraph = function(text) {
Expand Down Expand Up @@ -1037,24 +1061,30 @@ Parser.prototype.tok = function() {
}
case 'list_start': {
var body = ''
, taskList = false
, ordered = this.token.ordered;

while (this.next().type !== 'list_end') {
if (this.token.checked !== undefined) {
taskList = true;
}

body += this.tok();
}

return this.renderer.list(body, ordered);
return this.renderer.list(body, ordered, taskList);
}
case 'list_item_start': {
var body = '';
var body = ''
, checked = this.token.checked;

while (this.next().type !== 'list_item_end') {
body += this.token.type === 'text'
? this.parseText()
: this.tok();
}

return this.renderer.listitem(body);
return this.renderer.listitem(body, checked);
}
case 'loose_item_start': {
var body = '';
Expand All @@ -1063,7 +1093,7 @@ Parser.prototype.tok = function() {
body += this.tok();
}

return this.renderer.listitem(body);
return this.renderer.listitem(body, checked);
}
case 'html': {
var html = !this.token.pre && !this.options.pedantic
Expand Down
11 changes: 11 additions & 0 deletions test/tests/gfm_task_list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> foo</li>
<li>bar</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> baz</li>
<li>[] bam
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> bim</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> lim</li>
</ul>
</li>
</ul>
6 changes: 6 additions & 0 deletions test/tests/gfm_task_list.text
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
* [ ] foo
* bar
* [x] baz
* [] bam
* [ ] bim
* [ ] lim

0 comments on commit bf39349

Please sign in to comment.