Support github style checkboxes

[eric-burel]

Is your feature request related to a problem? Please describe.

I use checkboxes to indicate when something as to be done, when writing slides for courses/practical applications.

According to GitHub, this belongs to their "tasklist" extension: https://github.github.com/gfm/

Describe the solution you'd like
This syntax:

- [ ] My text
- [X] Checked 

Should translate to:

<li><input type="checkbox" /> My text </li>
<li><input type="checkbox" checked/> My text </li>

and render like this (in the web version but also when exported in PDF/PNG):

• My text
• Checked

I am not sure about the bullet point though, however GitHub works this way currently (just using [ ] without a dash does nothing).

Describe alternatives you've considered

• Adding - <input type="checkbox" /> manually. Not sure how it will behave after export. It doesn't render very well however, because you need a bullet point to have correct line jumps, and the text won't support inline code anymore

• Using a square emoji also works https://emojipedia.org/search/?q=square but is not interactive

[twitwi]

maybe https://github.com/revin/markdown-it-task-lists is worth a try (as slidev uses markdown-it)

[eric-burel]

@twitwi Is there a doc on how to install such plugins? I find doc to customize almost everything but not the parsing itself, a plugin would be perfect

[yjl9903]

See https://sli.dev/custom/config-vite.html#configure-internal-plugins

I think this will work

import { defineConfig } from 'vite'
import taskLists from 'markdown-it-task-lists'

export default defineConfig({
  slidev: {
    vue: {
      /* vue options */
    },
    markdown: {
      /* markdown-it options */
      markdownItSetup(md) {
        /* custom markdown-it plugins */
        md.use(taskLists)
      },
    },
    /* options for other plugins */
  },
})

[eric-burel]

Wow excellent!

Works ok in PDF as well.

You'd probably want the doc to have a "Configure Markdown" section that points to this, since that's one of the common thing you'd want to configure

3 last issues:

• it keeps the list dashes while GitHub doesn't. But I guess I can playround with some CSS to hide them if they are followed by an input checkbox.
• they are disabled when rendered, not sure how to bypass this => the "enabled" option of the plugin sadly doesn't work, it outputs invalid HTML => see this PR that should fix this issue Add missing space to fix "enabled" true mode revin/markdown-it-task-lists#34
• TS is not happy with this config, should I do something to have the "slidev" key working ok in this object?

[antfu]

I think it makes sense to have the plugin built in. PR welcome if anyone wants to work on that!

[eric-burel]

This PR on the package repo should help but it doesn't seem well maintained: revin/markdown-it-task-lists#34
Maybe you'd want to include this plugin in Slidev or get support from markdown-it developers? Seems like something they could commit to support, it's a basic feature

[antfu]

We are now using https://github.com/hedgedoc/markdown-it-better-task-lists and shipped in v0.34.3

As for built-in support from markdown-it, I guess they are aware of it and must have some reason to not support it builtin otherwise I think it should be supported on day one.