Make tasks more usable

[colinfrei]

Two suggestions for the task list:

• Don't display the bullets next to the checkboxes
• Make checkboxes clickable/changeable in the preview

[uranusjr]

Both are kind of planned, but not done yet due to various reasons.

The first one is purely cosmetic. I can add some CSS rules to hide the bullets, but I’m not sure whether that’s really necessary, and whether people really want that to happen. And if it does, the extra CSS should probably only exist when task list syntax is turned on. It’s all detail and the priority is so low I didn’t take much time thinking it though. But since it’s brought up I will probably plan it for the next version.

The second one is more involved. If you checked the code you’ll find that they are actually disabled intentionally. This is because I have not yet find a good (non-hacky) way to sync the actions in the preview back to the editor. GitHub uses an Ajax call to do that only when the changes are save to the server. To prove it, try adding a task list in the comment editor and look into the preview tab—the checkboxes won’t be clickable there. MacDown is more like the comment editor/preview combination than saved documents, so it would be pretty tedious to implement that.

With that said, I would definitely change this if given the needed tools. There are things planned to improve the current Markdown parser to convey better information to the original source, which would improve things vastly regarding this. We are working hard to make that happen. :smiley:

[colinfrei]

That it's only a preview makes sense, thanks for the feedback :)

[johansen]

I think dropping the bullets and making [ ] or [x] appear as a checkbox in the preview would be enough for my purposes. I don't mind if the checkboxes in preview aren't actually clickable---I just want my task list to look like a task list.

[uranusjr]

@johansen The bullet point is just a styling thing. Simplest way to customise is to add the following block to the top of your document:

<style>.task-list-item { list-style: none; }</style>

(Preemptive answer to inquiries about why this is not included by default: I had plans to rewrite all existing styles, but haven’t found the time to do so.)

[johansen]

Thanks for the style tip. It wouldn't turn [ ] into a checkbox widget, though, and I can't think of how you would do that using CSS.

[uranusjr]

I’m not quite sure what you mean by a “checkbox widget”. If you mean

• [ ] Get some milk
• [ ] Mow the lawn

MacDown can already render this (but it’ll be read-only, as previously mentioned). Check “Task list syntax” in the Rendering preference tab.

[johansen]

My apologies, somehow I missed the "Task list syntax" option

[sealocal]

I added that CSS rule to GitHub2.css

.task-list-item {
  list-style: none; }

Why not just merge that rule into GitHub2.css? Isn't the idea to mirror GFM as much as possible?

[uranusjr]

Because GitHub’s style is actually more involved that just that. Try mixing items with and without a checkbox and you’ll see what I mean.

But I guess I wouldn’t reject if someone sends a pull request.

[AlexanderWillner]

Plans to add a way to define an indeterminate checkbox, e.g., by using [-]?

[FranklinYu]

@AlexanderWillner I think it deserves its own issue, but there's no such plan yet.

[ViggoV]

I could really use these features. I love Macdown, but the ability to create functioning and github-compatible checklists would take it to the next level 👍