Is it possible to parse and generate the same task list (with classes) as GitHub?

[hyrious]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

It is true that the GFM spec said to generate task list in this way:

<ul>
  <li><input disabled="" type="checkbox"> foo</li>
</ul>

However, GitHub itself adds special classes to these tags to help styling:

<ul class="contains-task-list">
  <li class="task-list-item"><input disabled="" class="task-list-item-checkbox" type="checkbox"> foo</li>
</ul>

I wonder how to accomplish this kind of output. In fact I'm still not fully understand how the plugin system works.

Solution

N/A

Alternatives

N/A

[wooorm]

Hey!

In fact I'm still not fully understand how the plugin system works.

This is explained in-depth in the micromark readme, in the chapter on Extensions.

However, GitHub itself adds special classes to these tags to help styling:

Customization like this is not really what micromark is for. The AST provided by mdast/remark/unified/etc is a great place to do these things.

I wonder what you mean with “helps styling”: CSS can access these checkboxes with CSS selectors such as input:checked.

The HTML extension here is pretty simple. You should be able to read the code and figure out how to change it to match your preference.

I am somewhat maybe open to a PR that introduces options to match github.com instead of what they have in their spec. However, I there is already a whole ecosystem that does all of that: unified/remark/rehype/mdast/hast/etc.

[hyrious]

Thank you for the reply!

1. Working on the AST does make sense. I just wondering if micromark could do this task (let events in list item (<li>) affect the whole list (<ul>), since the html extension only outputs the list item.

   I may have to dig it for a while.

2. Yes styling the current output won't be hard in CSS4 when we have :has(). GitHub does this just for removing the list-style/padding of the <ul>. Besides, I have a github-markdown-css and I want to reuse it, so I want to be like github as much as possible.

[wooorm]

Did you check the source btw? https://github.com/micromark/micromark-extension-gfm-task-list-item/blob/38ce420db9504bd3c14a13f68b95a7fc6db1454a/dev/lib/html.js#L6 Because it's tiny!

[hyrious]

Yep, that's why I said

since the html extension only outputs the list item.

It took me some time to find out the correct event name for <ul> is listUnordered:

https://github.com/micromark/micromark/blob/27d3426f0181215a60700424c36671467592e495/packages/micromark/dev/lib/compile.js#L490

I'm still seeking the way to

1. call the default handler in a custom enter.listUnordered, so that I can just append tag('class="contains-task-list" ');
2. store some data in the syntax extension to let the html extension know when to append that tag.

Thanks again for the assistance.

[wooorm]

Ah. Yeah, that is exactly what you need an AST for.

---

1. call the default handler in a custom enter.listUnordered, so that I can just append tag('class="contains-task-list" ');

I might be slightly open to exporting default handlers. However, the compiler is very tightly coupled. Hard to externalize something like that.

2. store some data in the syntax extension to let the html extension know when to append that tag.

getData and setData are that

---

I’m going to close this. I get what you want, but this project is intentionally really low level. We support everything you want at a higher level: mdast. Or remark.

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.