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
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
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.
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:
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:
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.
OUTPUT:
This is how inline code looks like
Write your code
Here and it
will turn into a
code block
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
- List Item
- List Item
- List 2
- List 2
- List 2
- List Item
Unordered List
- List Item
- List Item
- List 2
- List 2
- List 2
- List Item
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.
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 \ |
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.
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
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
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
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)
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.
βοΈ