How to enable checkboxes in markdown preview for VSCode

user_3532271 0
Viewed 5835

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?

visual-studio-code markdown
6 Answers

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

user_68787580

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

markdown checkbox demo

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

marketplace checkbox markdown demo

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.

user_8363300

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
user_114042950

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

enter image description here

user_124800

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.

user_179277830

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.

user_13903750
Related