An attempt to make a list of the supported ways to make a table with checkboxes in Markdown.
Results as of October 2023.
Below is the style element that formats the colors of the colored check mark emojis.
<style>span[class="checked"]{color: green;}</style> <style>span[class="unchecked"]{color: red;}</style><style>span[class="checked"]{color: green;}</style>
<style>span[class="unchecked"]{color: red;}</style>Below is the style element that formats the "Read-Only" Checkbox style. It is invisible in VS Code, and printed as plaintext in Github markdown.
<style>input[type='checkbox'][readonly]{pointer-events: none;}</style><style>input[type='checkbox'][readonly]{pointer-events: none;}</style>| Checkmark Style | Checked | Unchecked | VS Code Markdown | Github Markdown | Checked Plaintext | Unchecked Plaintext | Notes |
|---|---|---|---|---|---|---|---|
| Check Mark Symbol and Cross Mark Emojis | ✅ | ❌ | Yes | Yes | Unicode "Check Mark Symbol" \u2705 |
Unicode "Cross Mark" \u274c |
Can be written :white_check_mark:, and the cross mark can be written :x: on Github. |
| Grey Check Box with Check | ☑️ | Plain symbol | Plain symbol in Chrome | Unicode "Check Box with Check" \u2611\ufe0f |
Can be written :ballot_box_with_check: on Github. In Safari and Firefox, this renders as a nice grey checkbox. In Chrome and VS Code, this renders as the plain symbol. There is no cooresponding unchecked symbol. |
||
| Plain Check Box with Check | ☑ | ☐ | Yes | Yes | Unicode "Check Box with Check" \u2611 |
Unicode "Ballot" \u2610 |
This is the plain symbol. Very simply drawn, but is widely supported. |
| Check Mark Emojis | ✔ | ✘ | Yes | Yes | Unicode "Heavy Check Mark" \u2714 |
Unicode "Heavy Ballot X" \u2718 |
There is no Github shortcut for these Unicode characters. These can be encoded with HTML Entity ✔ (✔) and ✘ (✘). |
| Colored Check Mark Emojis | ✔ | ✘ | Yes | No | <span class="checked">✔</span> |
<span class="unchecked">✘</span> |
Use CSS rules to color the checkmarks. These can be encoded with HTML Entity ✔ (✔) and ✘ (✘). |
| HTML Entity Code | ✓ | ✗ | Yes | Yes | HTML ✓ |
HTML ✗ |
|
| HTML Disabled Checkbox Element | Yes | Does not render | <input type="checkbox" disabled checked> |
<input type="checkbox" disabled> |
HTML Disabled Checkbox. Since they are disabled, they appear greyed out. These do not render at all in Github Markdown. | ||
| HTML Read-Only Checkbox Element | Yes | Does not render | <input type="checkbox" readonly tabindex=-1 checked> |
<input type="checkbox" readonly tabindex=-1> |
HTML Read-only Checkbox. Using CSS and tabindex=-1 to make them not modifiable. These do not render at all in Github Markdown. |
||
| Markdown list in HTML List Element | No | Clickable in Safari | <ul><li>- [x] </li></ul> |
<ul><li>- [ ] </li></ul> |
Using Markdown checkmark list in HTML element. If the <ul></ul> code is omitted, the checkmark will overlap the column edge of the table in Chrome and Firefox. In Safari, this produces a button that is clickable once. Renders as a bullet in VS Code. Does not work in the "Preview" pane of Github, but does work in normal rendering. |
Links for further reading:
- https://emojipedia.org/
- https://github.github.com/gfm/
- https://gist.github.com/rxaviers/7360908
- https://www.programmingbasic.com/create-checkbox-inside-markdown-table-github
- https://stackoverflow.com/questions/47344571/how-to-draw-checkbox-or-tick-mark-in-github-markdown-table
- https://launchhubstudio.com/blog/comparison-table-html-css
- https://gist.github.com/seanh/13a93686bf4c2cb16e658b3cf96807f2
Using the normal Markdown syntax, VS Code does not inherently support checkboxes in lists.
- [x] checked
- [ ] not checkedThis can be enabled by a few different Markdown extensions
-
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
- Adds non-clickable checkboxes.
- Also adds a other useful features, such as Markdown formatting and table of contents.
-
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-checkbox
- Adds clickable checkboxes.