Do you know Markdown!
Tags: webdev, tutorial, markdown, productivity
Published: 2020-12-31 09:44:28

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](#contents)
  * [Headings](#headings)
  * [Formatting Texts](#formatting-texts)
  * [Links](#links) 
  * [Images](#images)
  * [Code Snippet](#code-snippet)
  * [Lists](#lists)
  * [Blockquotes](#blockquotes)
  * [Tables](#tables)
  * [Horizontal Lines](#horizontal-lines)
  * [Emoticons](#emoticons)
2. [Practice online](#practice-online)
3. [Bonus!](#typora)   

---

### **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](#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](#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](https://dev.to/hardikchopra242)

[Back to Contents](#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:**

![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)

[Back to Contents](#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:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ig4l4v8j74k3yefzf1qf.png)

**OUTPUT:**

This is how inline `code looks like`

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

[Back to Contents](#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](#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](#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:**

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

[Back to Contents](#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](#contents)

---

### **Emoticons**

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

**INPUT:**
```
:smile: :mask: :bug:
```

**OUTPUT:**
:smile: :mask: :bug:


For markdown emoji cheatsheet **[click here](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)**


[Back to Contents](#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](https://dillinger.io/) :crown:
* [JBT Markdown](https://jbt.github.io/markdown-editor/)

[Back to Contents](#contents)

---

<p id="bonus"></p>
## **Bonus!!**:fire:

### 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.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kvitu98pydmxqcg1qy5p.png)

Features:
* Ton of themes
* Live preview of what you write in markdown
* Many editing options 

**[Download Typora](https://typora.io/)**

[Back to Contents](#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!💬