Learn Markdown Github checkbox - alias Tasks list example

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 a 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 the preview

checkbox github flavoured 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 the view

markdown checkbox inside table

nested checkbox list example

if you want to display a checkbox or tasks list in a 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 flavored markdown

3 ways to create a checkbox in Github

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

HTML item using ✓
Emojis using white_check_mark
Unicode using ☒

Let’s see an example

&check; - html checkbox example
✅ - emoji checkbox example
&#9746; - unicode checkbox example

Displayed on the preview are as follows

✓ - html checkbox example

✅ - emoji checkbox example

☒ - unicode checkbox example

multiple checkboxes in a 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 this using emojis In the below example,

black_square_button - used for checkbox not checked
black_square_button - for checkbox with checked

☑️Male 🔲Female 🔲 Not to disclose

Multiple checkboxes in a single line

emoji supported syntax:

The checkbox can be replaced with different styles of emojis.

Syntax

:emojinames:

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

Example

I learning  markdown syntax and tutorials, Excellent  :thumbs up:

Displayed in the GitHub preview is

I learning markdown syntax and tutorials, Excellent 👍

Escaping characters in Github

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