DEV Community

Cover image for 🖊️ Mastering Markdown : The Complete Guide
Vedant Chainani
Vedant Chainani

Posted on • Updated on

🖊️ Mastering Markdown : The Complete Guide

#tutorial #markdown #beginners

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!

Read next

keshavkhatri profile image

Working with Dates and Times in JavaScript

Keshav Khatri -

amyroy profile image

‍How much does it cost to start a business online

amyroy -

kueiapp profile image

Start to use VueJS

Kueiapp -

colinsoleim profile image

Supercharging Rails: Enabling Ruby's YJIT Compiler in Production

Colin Soleim -