Markdown - Github checkbox

This tutorial covers Learning Markdown checkbox - Tasks list, checkbox ,nested checkboxes,inside table,escape characters and emojis content with syntax and examples..

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