Markdown checkbox in github

github markdown coded in README.md or any file with md extension.

Syntax

add hyphen starting of the line with [] or [x], space should be added before and after square brackets followed by content. This is also called Task list.

 - [] Checkbox not checked
 - [X] Checkbox checked

Let’s see an example checkbox

  • [] for empty checkbox
  • [x] for checkbox checked
\### Project status

- [x] Design
- [x] Mockups
- [x] Development
- [x] Unit testing
- [ ] QA
- [ ] Stage
- [ ] Beta Testing
- [ ] Production

and output is displayed on preview

checkbox github favoured markdown  example

checkbox github favoured markdown example

checkbox inside markdown table

| Stage      | Time to complete  | Current Status | Finished                       | 
|------------|---------------|----------------|------------------------------------|
| Development| 2 days    | Work in progress | <ul><li>- [x] completed</li><li>- [ ] todo</li></ul>
| QA     |3 days |  Work in progress | <ul><li>[x] done</li><li>[ ] tobedone</li></ul>

and displayed in view

checkbox inside table of github favoured markdown

checkbox inside table

nested checkbox list example

if you want to display checkbox or tasks list in nested structure

- [X] Parent 1
    - [X] Child - 1
    - [X] Child - 2
    - [X] Child - 3
    - [X] Child - 4
- [ ] Parent 2
    - [ ] Child - 1
    - [ ] Child - 2
    - [ ] Child - 3
    - [ ] Child - 4

Displayed in the github preview window as

Nested checkbox github favoured markdown

Nested checkbox github favoured markdown

3 ways creating checkbox in github

It supports normal square brackets, but also can be created checkboxes with below syntaxes

  • Html item using ✓
  • Emojis using white_check_mark
  • Unicode using ☒

Let’s see an example

&check; - html checkbox example
:white_check_mark: - emoji checkbox example
&#9746; - unicode checkbox example

Displayed on preview is as follows

✓ - html checkbox example

✅ - emoji checkbox example

☒ - unicode checkbox example

multiple checkbox in single line

multiple checkboxes can be displayed in a single line using the below markdown code

There is no inbuilt support in github, But we can achieve using emojis In the below example,

  • black_square_button - used for checkbox not checked
  • black_square_button - for checkbox with checked
:ballot_box_with_check:Male :black_square_button:Female :black_square_button: Not to disclose
Multiple checkboxes in single line markdown

Multiple checkboxes in single line

emoji supported syntax

Checkbox can be replaced with different styles of emojis. .

Syntax

:emojinames:

emojinames are valid names supported by github. each name enclosed in colon symbol . Please check complete list of supported emojis.

Example

I learning  markdown syntax and tutorials, Excellent  :thumbsup:

Displayed in GitHub preview is

I learning  markdown syntax and tutorials, Excellent 👍 

Escaping characters in github

Some times escaping character is required for displaying #,* or [] as these without processing it. backslash -() is required starting of character

Let’s see an example

- \[] example displayed square brackets - Aded escape `\` added
- [X] example displayed checkbox instead of square brackets - Not escaped

Displayed on view

  • [] example displayed square brackets - Added escape \ added
  • example displayed checkbox instead of square brackets - Not escaped