DEV Community

Cover image for Do you know Markdown!
Hardik Chopra
Hardik Chopra

Posted on • Updated on

Do you know Markdown!

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
  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  
Enter fullscreen mode Exit fullscreen mode

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~~
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

OUTPUT:

Meme

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:
Alt Text

OUTPUT:

This is how inline code looks like

Write your code
Here and it
will turn into a 
code block
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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  \| |
Enter fullscreen mode Exit fullscreen mode

OUTPUT:

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

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

***

Enter fullscreen mode Exit fullscreen mode

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:
Enter fullscreen mode Exit fullscreen mode

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!

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.

Alt Text

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!💬

Top comments (2)

Collapse
 
russeby profile image
RussEby

Markdown is built into VS Code and there is an extension called Markdown PDF that exports the Markdown in HTML, PNG or PDF. I use the PDF export often.

Thanks for the article, this will be a great link to send to people that want a short introduction to Markdown.

Collapse
 
hardikchopra profile image
Hardik Chopra

✌️