CODEWITHSUNDEEP
githubmarkdown
em_code
em_code

Reputation: 438

How to use checkbox in Github markdown?

I want to include a checkbox in my PR template which I thought could be achieved by html since Github markdown supports it. It did work fine on VScode but when I pushed it, seems like its broken in Github as it doesn't render the checkboxes. I can think that some people will suggest to use either this:

- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley

or any other solution that you can think of with the emojis. The problem is that none of them really helps to me since I want people to simply interact with the checkboxes rather then having them to get in to markdown and insert some text there in order to be rendered as checkbox. Any idea what could be the way around?

Upvotes: 2

Views: 13966

Answers (1)

Waylan
Waylan

Reputation: 42497

You can only user Markdown based checkboxes on GitHub.

If you have an HTML form which contains a checkbox, after the user "checks" the box the form would need to be submitted to a server and then state would need to be updated on the server. GitHub does not have a mechanism to do that.

Additionally, GitHub passes all user provided content through a very rigorous sanitizer which removes many types of content. I expect that they would remove any and all form elements from user provided content as forms would be an easy way for a malicious user to execute attacks of various types.

And then there is the fact that any content included in your issue templates would be displayed to the user within a textarea as raw source. The user would see <input type="checkbox"> rather than a rendered checkbox. And then the user would need to edit it to include the checked attribute: <input type="checkbox" checked>.

Therefore, the only solution is to use Markdown based checkboxes. The user needs to edit the Markdown by adding an x inside the brackets to reflect that an item was "checked". Needless to say, that is much easier than adding checked to raw HTML. And it doesn't require a form to be submitted or a server to receive the submission and save the new state.

* [x] checked
* [ ] not checked

Upvotes: 6

Related Questions