如何在 VSCode 的 markdown 预览中启用复选框

Question

I'm trying to enable markdown checkboxes in vscode markdown preview but am not having any luck. I've tried every combination of the following extensions with no luck:

• Markdown Preview Enhanced
• Markdown All in One
• Markdown Preview Github Styling
• Markdown Checkbox
• Markdown Checkboxes

Does anyone have a configuration of extensions where this is working for you?

Answer 1

I was facing the same issue, and it looks like VSCode markdown does not support checkboxes and you need to install an extension.

Answer 2

As of January, 2022 this is working for me in a markdown preview:

<input type="checkbox" checked> some checked text  
<input type="checkbox"> some unchecked text  

NOTE This works in a published vscode extension markdown file (in the Marketplace):

But I am still investigating getting it to work in github - any ideas? input elements do not appear to be in the prohibited list so it "should" work somehow.

But see https://github.com/gjtorikian/html-pipeline/blob/main/lib/html/pipeline/sanitization_filter.rb input elements are not in the allowed list in the sanitizer file.

Answer 3

Here is the combination I use to replicate Github's styling for my READMEs

Make sure you reload VSCode after installing!

Name: GitHub Markdown Preview
Id: bierner.github-markdown-preview
Description: Changes VS Code's built-in markdown preview to match GitHub
Version: 0.2.0
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview

Answer 4

I just noticed that for the extension "Markdown Checkbox" by Matt Bierner to work properly in checking boxes in preview, you have to either disable or uninstall "Markdown All in One". All in One seems to be prioritized in the rendering of the checkboxes over the first extension in which they can actually be checked

Could be great to have some kind of fork in between both extensions.

Answer 5

Checkboxes work in VSCode using Markdown All In One. The trick is that the checkboxes also have to be part of a list.

This doesn't work:

[ ] Unchecked
[ ] Checked

This works:

- [ ] Unchecked
- [x] Checked

Answer 6

Foudn this here: https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts

You can do markdown checkboxes like this in VSCode text boxes (and I'm sure.md files too) in list items:

• [ ] Bug 1 Totally Inconceivable!
• [X] Bug 2 You keep using that word. I do not think it means what you think it means.

to "set" the check box, replace the space in the square brackets with a X.