Markdown - Github checkbox

This tutorial covers 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 squarebrackets followed by content. This is also called Tasklist.

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

Let’s see an example checkbox

  • [] for empty checbox
  • [x] for checbox checked ```markdown ### 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 ```markdown | 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 dislay 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

multile 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 chchkbox 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 supporte 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:

Displyaed 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 - Aded escape \ added
Prev