If you write articles on DEV you might know markdown but if you don't know, let's learn it.

Markdown is a lightweight markup language that you can use to add formatting elements to plain text documents. Markdown is used widely in the community, being it either writing README for Github or writing dev articles, markdown is used everywhere.

I will be discussing some basics and resources related to markdown.

Contents

1. Syntax
   • Headings
   • Formatting Texts
   • Links
   • Images
   • Code Snippet
   • Lists
   • Blockquotes
   • Tables
   • Horizontal Lines
   • Emoticons
2. Practice online
3. Bonus!

Headings

Just like we have h1,h2....h6 tags in HTML, we have these heading tags in markdown as well. We use this with the help of #

INPUT:

# This is Heading
## This is Heading
### This is Heading
#### This is Heading
##### This is Heading
###### This is Heading  

OUTPUT:

This is Heading

This is Heading

This is Heading

This is Heading

This is Heading

This is Heading

Back to Contents

Formatting Texts

You have different formatting options in markdown. You can use bold or italics but you have not the option of underlining text in pure markdown.

• To bold, enclose the text between 2 asterisks on both sides. ** **
• To make the text emphasized, enclose text between 1 asterisk on both sides. * *
• To make bold and emphasized both, enclose text between 3 asterisks. *** ***
• For Strikethrough text, enclose it between ~~ ~~

INPUT:

**Bold**
*Emphasized*
***Both***
~~Strikethrough~~

OUTPUT:

Bold
Emphasized
Both
Strikethrough

Note: Instead of asterisks(*), underscore(_) can also be used.

Back to Contents

Links

It is very easy to add links or hrefs in markdown. Write the text inside square brackets [] and put the link in round brackets ().

INPUT:

[My Dev Profile](https://dev.to/hardikchopra242)

OUTPUT:

My Dev Profile

Back to Contents

Images

Adding images is very much similar to adding links. One difference is that we put an exclamation mark ! in front. In the square brackets, we write the Alt text and in the round brackets, we give the link to our image.

INPUT:

![Meme](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.YIPISOt_bX8dMMUBzE-hPAHaFj%26pid%3DApi&f=1)

OUTPUT:

Back to Contents

Code Snippet

There are two options to add code snippets, one is inside a continuous line and the second is a whole code snippet block.
For inline we use a single back-tick and for a snippet block, we enclose the code in three back-tick pairs.

INPUT:

OUTPUT:

This is how inline code looks like

Write your code
Here and it
will turn into a 
code block

Back to Contents

Lists

You can add ordered or unordered lists in the markdown by just numbering them or putting asterisks * ahead of every element

INPUT:

Ordered List

1. List Item   
2. List Item
  1. List 2       //For nested lists, use two-space indentation
  2. List 2
  3. List 2
3. List Item


Unordered List

* List Item      //Inplace of * , - and + can also be used 
* List Item    
  * List 2
  * List 2
  * List 2
* List Item

OUTPUT:

Ordered List

1. List Item
2. List Item
   1. List 2
   2. List 2
   3. List 2
3. List Item

Unordered List

• List Item
• List Item
  • List 2
  • List 2
  • List 2
• List Item

Back to Contents

Blockquotes

Blockquotes can be added using > at the start of a line. You can also use nested blockquotes.

INPUT:

>This is a BlockQuote.
>This is a BlockQuote.
>>This is a ***nested*** BlockQuote.

OUTPUT:

This is a BlockQuote.
This is a BlockQuote.

This is a nested BlockQuote.

Back to Contents

Tables

To make tables, every column should be separated using | and :--------: can be used to make the column headings bold.

INPUT:

| Column 1       | Column 2     | Column 3     |
| :------------- | :----------: | :-----------: |
|  Row 1 | To escape   | the pipes,    |
| Row 2   | Use backslash| Like this  \| |

OUTPUT:

Back to Contents

Horizontal Lines

There are three different ways to make a horizontal line. These are:
Using three continuous -, *, and _.

INPUT:

Paragraph 1

---

Paragraph 2

___

Paragraph 3

***

OUTPUT:
Paragraph 1

Paragraph 2

Paragraph 3

Don't forget to give a line space above and below the syntax.

Back to Contents

Emoticons

To use emoticons in your markdown place emoticon code inside two colons : emoticon_code :

INPUT:

:smile: :mask: :bug:

OUTPUT:
😄 😷 🐛

For markdown emoji cheatsheet click here

Back to Contents

Practice Online

To practice markdown, you can refer to some of the following websites. Anytime if you feel like you should try something out, jump to one of these websites and write markdown!

• Dillinger 👑
• JBT Markdown

Back to Contents

Bonus!!🔥

Typora

Typora is a markdown editor. One of my friends suggested me to use Typora for making notes and it's fantastic!
When we learn something new we have to note that somewhere so that we can recall that later. Typora can be used for this purpose.

Features:

• Ton of themes
• Live preview of what you write in markdown
• Many editing options

Download Typora

Back to Contents

If you got to learn something new and useful show some love by giving this post a ❤️

If you find it useful for you, save this post and share it with your programming buddies 😃

Do you know any other markdown tricks? Do share it in the comment section!💬