Markdown Checkboxes

Maybe it's ok that all of these posts are just about building this blog right now? Seeing as that's what I'm working on and this is a blog about just that.

I was genuinely curious how this was going to render....

the code:
- [ ] a
- [ ] b
- [ ] c

the result:

• [ ] a
• [ ] b
• [ ] c

I thought mdx might give me a github style checkbox, but that doesn't appear to be the case.

This led me a down a little tangent. Surely, I thought, there must be some kind of package that supplies this, either for MDX or remark (the markdown processing library). There does not appear to be one, in spite of the fact that it looks really extensible (MDX touts that it's core is written as a plugins ) & that there's a pretty healthy ecosystem of packages.

• https://remark.js.org/
• https://github.com/remarkjs/awesome-remark
• https://mdxjs.com/guides/writing-a-plugin

Then I remembered ... right duh, this is JSX & markdown, so if anyone ever really wanted a checkbox, they'd be more likely to just build it for themselves.

And so I did. Not that it's really useful ... since we're not storing any user state.

# at the top of this page I import:
import Checkbox from './Checkbox'

# and checkbox is just a dead simple component right now:
const Checkbox = (props) => (
    <>
        <input type="checkbox" />
        <span>{props.children}</span>
    </>
)

a b c

The title is a bit of a lie, they're not actually markdown, but they do serve as a nice hello world for using components in MDX