What is Markdown?
Markdown is a lightweight markup language with a plain text formatting syntax. It can be converted into HTML/XHTML and others formats. It's main purpose is readability and ease of use.
What It Is Used For?
- README files (Github , etc.)
- Forum and Blog Posts (dev.to, Medium etc)
- Many static site generators.
Now let's have a look what can we do using markdown and how can we use it.
Headings
For Heading1
For Heading2
For Heading3
For Heading4
For Heading5
For Heading6
Alternatively, you can use an underline-ish style for H1 and H2:
For H1
For H2
Italic
Use single *asterisks* or _underscores_ for Italic.
Use single asterisks or underscores for Italic.
Bold/Strong
Use double **asterisks** or __underscores__ for Bold/Strong.
Use double asterisks or underscores for Bold/Strong.
Combined
**Bold and *Italic1* & _Italic2_**
Bold and Italic1 & Italic2
Strikethrough
Use two tildes ~~to scratch/strikethrough this.~~
Use two tildes to scratch/strikethrough this.
Horizontal Rule
You can use any of the following...
Using Hyphens
---
Using Asterisks
***
Using Underscores
___
Using three Hyphens
Using three Asterisks
Using three Underscores
Blockquotes
> This line is quoted.
> This line is part of the same quote.
Paragraph:
> You can write a paragraph inside a blockquote. You can also use different markdown here. Such as *itlic*, **bold**, ~~strike~~ etc.
This line is quoted.
This line is part of the same quote.
Paragraph:
You can write a paragraph inside a blockquote. You can also use different markdown here. Such as itlic, bold,
strikeetc.
Links
There are two ways to create links.
1. Inline Link
[Abdulah Al Jahid](https://username.medium.com/)
1. Inline Link With a Title
[Abdulah Al Jahid](https://github.com/username "My Github Account")
Tricky way to add links in a button
<a target="_blank" href=""><img src="https://img.shields.io/badge/-%23.svg?&style=plastic&logo=&logoColor=white" alt=""></a>
Medium Blog Link
<a target="_blank" href="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId"><img src="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId" alt="Alternative text">
Youtube Video Link
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID/0.jpg"
alt="Alternative text" width="240" height="180" border="10" /></a>
Images
Inline Style:
![Markdown Logo](https://markdown-here.com/img/icon256.png)
Reference Style:
![Markdown logo][logo]
`[logo]: https://markdown-here.com/img/icon256.png`
Inline Style:
Reference Style:
Inline Code Block
This is inline `code block` using `back-ticks`.
This is inline code block
using back-ticks
.
Code Blocks and Syntax Highlighting
Normal Code blocks
Bash:
npm install
npm run dev
Javascript:
function add(number1, number2) {
return number1 + number2;
}
Python:
def add(number1, number2):
return number1 + number2
List
UL
You can use */-/+ in unordered list
* Item 1
* Item 2
* Item 2.1
* Item 2.2
* Item 2.2.1
- Item 1
- Item 2
- Item 2.1
- Item 2.2
- Item 2.2.1
OL
1. Item 1
2. Item 2
3. Item 3
- Item 1
- Item 2
- Item 3
Table
| First Name | Last Name | Id |
| ------------- |---------------| ------|
| Mark | Down | 1 |
| Abdullah Al | Jahid | 2 |
| Awesome | Table | 0 |
First Name | Last Name | Id |
---|---|---|
Mark | Down | 1 |
Abdullah Al | Jahid | 2 |
Awesome | Table | 0 |
Top comments (0)