mjbvz / vscode-markdown-checkboxes

VS Code extension that adds support for checkbox syntax to the built-in markdown preview

Adds checkbox / task list support to VS Code's built-in markdown preview and in notebooks:

Features

• Adds support for Github's - [ ] and - [x] check box syntax to VS Code's built-in markdown preview.
• Adds - [ ] and - [x] checkbox rendering Markdown cells in notebooks.

vscode-markdown-checkboxes's Issues

Publish to Open VSX

A popular FLOSS-only fork of VSCode, VSCodium, uses a different extension store for legal reasons: Open VSX instead of the Visual Studio Marketplace. It would be helpful, if you would publish this extension there as well 🙌

The rather simple process is described here: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

Checkboxes Do Not Adhere to Colouration Preference

#22 (comment)

The checkboxes are white despite me using the dark theme. This causes me to wonder whether this extension is not rendering standard .HTML checkboxes as Electron should be able to.

Any chance of Notebook support?

Any chance this could be added to the markdown parser for VS Code notebooks?
I'd love to have checklist support in those. Even more so if the could be made clickable for easy toggling.
I haven't had time to look into it, so I presently have no clue how difficult this would be to implement.

Extension's marketplace page shows mermaid screenshot instead of check box example

The page at marketplace refers to mermaid extension screenshot:

Checkboxes misaligned

Running VS Code on Ubuntu 16.04. The check boxes and list items are not aligned well.

Invalid Checkboxes Unsupported

[-]

Nested lists

Nesteds lists doesn't render correctly :

Instead of :

Is it possible not to display the bulletpoints before the checkboxes?

If it is not - which is completely okay - it should be documented, e.g. in the readme.

Thank you for your helpful extension. :)

Toggle checkbox in preview could toggle in source

Since #9, checkboxes are togglable in the preview (which is great!), but doing so has no impact on the source.

Do you think it would be possible to toggle in the source upon toggling in the preview?

Checkboxes as Parents of Nested Lists Do Not Render Indentation

Notice how the table does not render as a child of its parent?

Does this extension have settings?

vscode-markdown-checkboxes/package.json

Lines 30 to 55 in dc0e4c4

	"contributes": {
	"markdown.markdownItPlugins": true,
	"markdown.previewStyles": [
	"checkboxes.css"
	],
	"configuration": {
	"title": "Markdown Checkboxes Options",
	"properties": {
	"vscode-markdown-checkboxes.enable": {
	"type": "boolean",
	"description": "Enable checkboxes in markdown preview.",
	"default": true
	},
	"vscode-markdown-checkboxes.label" : {
	"type": "boolean",
	"markdownDescription": "Wrap the rendered list items in a `<label>` element.",
	"default": false
	},
	"vscode-markdown-checkboxes.labelAfter" : {
	"type": "boolean",
	"markdownDescription": "Adds the label after the checkbox. Only applies when `#vscode-markdown-checkboxes.label#` is set to `true`.",
	"default": false
	}
	}
	}
	},

They are not present in Settings UI or settings.json.

task lists with wrapped lines have no hanging indent

With a task list, where a task is very long, and is wrapped in the preview... the wrap has no hanging indent and is instead restarted at the beginning of the line.

Repo

- [ ] test 1
- [ ] test 2 fs sfddsafsdsfg afg afsgfdsg asfgsa afdgafdsgsfdg dfsgdsfg
  sfdg sdfgsdffdsg fda sdf adsfasfas fdsafsadf sadf sadfsadf asdf asf
  saf sadfasdf asdfsadfas fsdafasdf sadfsadf sadfsadf asdfsadf asdf
- [ ] test 3

Errant Result

Expected

Here is the GitHub render. Notice the hanging indent on the second task

• test 1
• test 2 fs sfddsafsdsfg afg afsgfdsg asfgsa afdgafdsgsfdg dfsgdsfg
  sfdg sdfgsdffdsg fda sdf adsfasfas fdsafsadf sadf sadfsadf asdf asf
  saf sadfasdf asdfsadfas fsdafasdf sadfsadf sadfsadf asdfsadf asdf
• test 3

Notes

I found over https://gist.github.com/BigstickCarpet/5d31c053d0b1d52389eb2723f7550907 three css styles which would better match GitHub if I used them with the custom user setting "markdown.styles". I needed to tweak them a little. Here's what is working for me.

body .task-list-item {
    list-style-type: none;
    padding-left: 42px;
    padding-right: 15px;
    margin-left: -15px;
    margin-right: -15px;
}

body .task-list-item+.task-list-item {
    margin-top: 0;
}

body .task-list-item input {
    list-style-type: none;
    text-align: start;
    padding: 0;
    margin: 0 2.8px 3.5px -22.4px;
}

Wrong Alignment

The following snippet will be rendered with wrong alignment:

- Item 1
- [ ] todo
- Item 2

1. Item 1
2. [x] todo
3. Item 2

With this extension enabled:

With this extension disabled:

Github:

• Item 1
• todo
• Item 2

1. Item 1
2. todo
3. Item 2

Custom coloring of markdown text

Hi, this is more a question then a concrete request but have you every considered add color highlighting for the [x] piece? So that [ and ] have a different color then the x.

I'm just wondering if it is possible without override all other markdown styles. I've been doing a bit of research and I was able to hook a custom tmLanguage.json file in an extension that did similar coloring.
However I lost all other markdown coloring, so I'm trying to find out if it possible.

Maybe you have try this yourself, it is a long shot.

Option for Checked-box to be higher contrast or different color?

The current default box when checked is "grey on grey" and incredibly hard to see at a distance. Is there any way to make the box turn Green when checked? Or even just use a higher contrast "black on white" color scheme? The current look is basically unreadable, thus effectively useless at visually communicating what its supposed to communicate.

The specifics of the color/design aren't important here. There just needs to be something with a little more contrast.

Where exactly is this extension pulling its checkbox graphics from? Is it using something from VS Code's currently installed theme, or are the checkbox graphics custom? Or are the boxes generated with CSS or something?

Indeterminate Checkboxes Unsupported

[~]

...per https://gitlab.com/gitlab-org/gitlab/-/issues/367167.

Syntax highlighting for checkboxes and completed tasks

Tracking issue as a followup of microsoft/vscode#43504.
Checkboxes are essentially list items like the preceding - and highlighting should probably reflect it.
Completed task descriptions have a strikethrough in GFM rendering, so that could be added to syntax highlight too.

Suggestion: Keyboard shortcut

Nice little extension! It works well with the other markdown extensions and a material theme.

Would you consider adding a keyboard shortcut to toggle or create a checkbox?

If a shortcut were assigned like maybe Alt-S, then it would create the checkbox '[ ]' if it did not exist. If '[ ]' or '[x]' does exist, then it would alternate to the other one.

Thanks!

Add more contrast to colors of rendered boxes

I use checkboxes in MArkdown cells of Jupyter Notebooks. Currently, in the rendered markdown mode both completed and incompleted boxes look almost identical and while scrolling fast it is almost impossible to distinguish between both:

Is there a way to change colors, e.g., make completed boxes green? If not, could this feature be added as, e.g., a VS Code setting?

make checkbox active

Click on checkbox on preview should toggle checkbox