DEV Community

Cover image for πŸ–ŠοΈ Mastering Markdown : The Complete Guide
Vedant Chainani
Vedant Chainani

Posted on • Edited on

πŸ–ŠοΈ Mastering Markdown : The Complete Guide

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

Table of Contents

Headings

# Heading 1 
## Heading 2 
### Heading 3 
#### Heading 4 
##### Heading 5 
###### Heading 6
Enter fullscreen mode Exit fullscreen mode

Output-

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Line Breaks

Line 1
<br>
Line 2
Enter fullscreen mode Exit fullscreen mode

Output -

Line 1


Line 2


Emphasis

Bold

I love **bold text**.
I love __bold text__.
Love**is**bold
Enter fullscreen mode Exit fullscreen mode

Output
I love bold text.
I love bold text.
Love*is*bold


Italic

this is *italics text*
this is _italics text_
thisis*italics*text
Enter fullscreen mode Exit fullscreen mode

Output-
this is italics text
this is italics text
thisis*italics*text


Strikethrough

~~The world is flat.~~ We now know that the world is round.
Enter fullscreen mode Exit fullscreen mode

Output -

The world is flat. We now know that the world is round.


Blockquotes

Single Line

> This is a Single line Blockquote
Enter fullscreen mode Exit fullscreen mode

Output-

This is a Single line Blockquote


Blockquotes with Multiple Paragraphs

> This the first paragraph.
>
> And this is the second paragraph.
Enter fullscreen mode Exit fullscreen mode

Output-

This the first paragraph.

And this is the second paragraph.


Nested Blockquotes

> This the first paragraph.
>
>> And this is the nested paragraph.
Enter fullscreen mode Exit fullscreen mode

Output-

This the first paragraph.

And this is the nested paragraph.


Lists

Ordered Lists

1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
1. Second item
1. Third item
1. Fourth item

1. First item
8. Second item
3. Third item
5. Fourth item
Enter fullscreen mode Exit fullscreen mode

Output-

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. First item
  6. Second item
  7. Third item
  8. Fourth item
  9. First item
  10. Second item
  11. Third item
  12. Fourth item

Nesting List Items

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
Enter fullscreen mode Exit fullscreen mode

Output-

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

Unordered Lists

- First item
- Second item
- Third item
- Fourth item

* First item
* Second item
* Third item
* Fourth item

+ First item
* Second item
- Third item
+ Fourth it
Enter fullscreen mode Exit fullscreen mode

Output-

  • First item
  • Second item
  • Third item
  • Fourth item
  • First item
  • Second item
  • Third item
  • Fourth item
  • First item
  • Second item
  • Third item
  • Fourth item

Code Blocks

Enclose any code in (

```) signs


md
eg-
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}



Enter fullscreen mode Exit fullscreen mode

Footnotes


md
Here's a simple footnote,[^1] and here's a longer one.[^bignote]

Enter fullscreen mode Exit fullscreen mode

Output-
Here's a simple footnote,1 and here's a longer one.2

Heading IDs


md
### My Great Heading {#custom-id}



Enter fullscreen mode Exit fullscreen mode

Linking to Heading IDs


md
[Heading IDs]
(#heading-ids)



Enter fullscreen mode Exit fullscreen mode

Definition Lists


md
First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.



Enter fullscreen mode Exit fullscreen mode

Output-

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.


Task Lists


md
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media


Enter fullscreen mode Exit fullscreen mode

Output-

  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

Images


md
![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1280px-Markdown-mark.svg.png)


Enter fullscreen mode Exit fullscreen mode

Output-

Markdown Logo


Tables


md
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |



Enter fullscreen mode Exit fullscreen mode

Output-

Syntax Description
Header Title
Paragraph Text


  1. This is the first footnote. ↩

  2. Here's one with multiple paragraphs and code. ↩

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like.

Top comments (1)

Collapse
 
rammina profile image
Rammina

Thank you, this was helpful to me when creating my guides!