Sign in
Log inSign up
Markdown basics

Markdown basics

Basic Cheatsheet for Markdown syntax.

BUSHRA NAZISH's photo
BUSHRA NAZISH
·Mar 18, 2022·

4 min read

Overview?

Markdown is a lightweight markup language used for styling text such as in italic, bold and lists on the web & creating websites.

Headings

Syntax: # Heading 1; Similarly, ## Heading 2

  • TIP: "h3", "h4", "h5", "h6" follow the same pattern and style as "h1".

Text

  • Bold: This text here is **bold**
  • Italic: This text here is *italic*
  • Strikethrough: This text is ~~strikethrough~~

OUTPUT : Eddie Jaoude

  • Internal /deep links: We can link to sub sections on the page where we have created any heading.

Examples - 

[Link in page](#heading-1)

[Another link in page](#heading-3)

OUTPUT : Link in page

Another link in page

Image

Syntax: ![Title of image](mydomain.com/myimage.png)

Example: ![My GitHub Profile image](github.com/BushraNazish.png)

OUTPUT : My GitHub Profile image

  • TIP : The markdown style link don't support the link in a new tab.

Lists

UNODERED LISTS -

Option 1 - [preferred]

- item 1
- item 2
- item 3

Option 2 -

* item 1
* item 2
* item 3

Both gives same Output -

  • item 1
  • item 2
  • item 3

ORDERED LISTS -

1. item 1
2. item 2
3. item 3

Using "1" (helpful while re-ordering the list) -

1. item 1
1. item 2
1. item 3

Both gives same Output -

  1. item 1
  2. item 2
  3. item 3

CHECKLIST -

  • Pending tasks: empty "[ ]" with a space in-between
  • Complete tasks: "[x]"

Example -

- [x] item 1
- [ ] item 2
- [ ] item 3

NESTED LISTS - Here, we need to indent the sub list

- item 1
    - sub item 1a
    - sub item 1b
    -sub item 1c
- item 2
- item 3

Output -

  • item 1
    • sub item 1a
    • sub item 1b -sub item 1c
  • item 2
  • item 3

Table

  • Column Alignment - " :--- " will be left-aligned " :---: " will be center-aligned " ---: " will be right aligned

Example:

| Left aligned | Right aligned | Centered |
| :--- | ---: | :---: |
| Row 1a | Row 1b | Row 1c |
| Row 2a | Row 2b | Row 2c |
| Row 3a | Row 3b | Row 3c |

Code

  • Inline code - You can use the code const name='Bushra' in your config file by using "`" as opening and closing quote.

  • Code block - It is achieved by using "```" as opening and closing quote.

    const name='Eddie Jaoude';
console.log(name);

  • Code highlighting - It is used with writing ts (typescript) with opening "```".

    const name='Eddie';
console.log(name);

Quote -

It is good to quote the previous discussion to help give context; achieved using ">" syntax.

> This is a quote to give context
I agree with this idea

It gives the following Output:

This is a quote to give context

I agree with this idea

Comments

<!-- This is a comment -- >

  • TIP: It can be done over multiple lines.

Collapsable content

Example -

<details>
<summary> Click to expand! </summary>

More great tips!

</details>

It gives the following OUTPUT -

Click to expand! More great tips!
  • TIP - Careful while using indentation.

HTML

It is posiible to mix markdown and html in the same page, but not in the same component. Example - To put a list inside a table, html have to be used; as markdown will not work.

Misc.

Markdown syntax can be mixed.

Example -

- item 1 with **bold** text
- item 2 with *italic* text
- item 3 ~~is not needed anymore~~

It displays as :

  • item 1 with bold text
  • item 2 with italic text
  • item 3 is not needed anymore

YOU CAN FIND THE HANDS-ON COURSE ON : eddiejaoude.io/course-github-profile/index

Thanks for reading!!

Happy Learning :)

Would Love to connect and grow together : Bio link 🔗 linktr.ee/BushraNazish

4