sindresorhus / github-markdown-css

The minimal amount of CSS to replicate the GitHub Markdown style
https://sindresorhus.com/github-markdown-css
MIT License
7.99k stars 2.1k forks source link

Task List style with v5.0.0 differs from that of v4.0.0 #92

Closed abraj closed 2 years ago

abraj commented 2 years ago

Thanks for the great work put into this project.

Issue Description:

After the release of v5.0.0, the style for task list in the following situation differs from that of v4.0.0 (as well as GitHub style).

For example, consider the following markdown (GFM) for a task list:

- [ ] task list
- [x] checked item

The rendered markup for the above markdown with styles from github-markdown-css v5.0.0 is shown as following (screenshot): (Note the bullet visible in front of each task item)

Screenshot 2021-11-17 at 7 32 59 PM

However, exactly the same markup with styles from github-markdown-css v4.0.0 is shown as following (screenshot):

Screenshot 2021-11-17 at 7 33 24 PM

The following is directly rendered using markdown code here (GitHub style):

So, I believe the bullet visible in front of each task item for v5.0.0 should not be there.

The output markup (for the above mentioned task list markdown) is given below (for reference):

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

As expected for the use of this library, a class named markdown-body exists in a parent container inside the body.

As as side note, the task list demo on the demo page (https://sindresorhus.com/github-markdown-css/#task-list) also shows the bullet item in front of each task item (screenshot):

Screenshot 2021-11-17 at 8 04 36 PM
hyrious commented 2 years ago

Thanks a lot for reporting, however github's markdown render API seems not returning <ul class="task-list"> now:

await render(`
- [ ] task list
- [x] checked item
`)
'<ul>\n<li>[ ] task list</li>\n<li>[x] checked item</li>\n</ul>\n'

Maybe its another temporary bug in their API. I'll try to fix this style soon.

abraj commented 2 years ago

Maybe its another temporary bug in their API.

Maybe GitHub's markdown render API by default only renders core GFM spec. As per the spec, task list is an extension to the core GFM. Btw, I was using a markdown-it plugin for rendering the task list markdown.

I have updated the css for myself using latest generate-github-markdown-css@5.0.1. However, I believe npm package github-markdown-css could also be updated to include latest CSS.

Anyways, I believe this issue could now be closed.

sindresorhus commented 2 years ago

The style is fixed in https://github.com/sindresorhus/github-markdown-css/releases/tag/v5.1.0