DEV Community

Cover image for Markdown Cheat Sheet
Abdullah Al Jahid
Abdullah Al Jahid

Posted on

Markdown Cheat Sheet

#markdown #github #readme

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?

  1. README files (Github , etc.)
  2. Forum and Blog Posts (dev.to, Medium etc)
  3. Many static site generators.

Now let's have a look what can we do using markdown and how can we use it.

Headings

Alt Text

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

Use single asterisks or underscores for Italic.

Bold/Strong 

Use double **asterisks** or __underscores__ for Bold/Strong.
Enter fullscreen mode Exit fullscreen mode

Use double asterisks or underscores for Bold/Strong.

Combined 

**Bold and *Italic1* & _Italic2_**
Enter fullscreen mode Exit fullscreen mode

Bold and Italic1 & Italic2

Strikethrough 

Use two tildes ~~to scratch/strikethrough this.~~
Enter fullscreen mode Exit fullscreen mode

Use two tildes to scratch/strikethrough this.

Horizontal Rule 

You can use any of the following...
Using Hyphens

---

Using Asterisks

***

Using Underscores

___
Enter fullscreen mode Exit fullscreen mode

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

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.

Links

There are two ways to create links.
1. Inline Link

[Abdulah Al Jahid](https://username.medium.com/)
Enter fullscreen mode Exit fullscreen mode

Abdulah Al Jahid

1. Inline Link With a Title

[Abdulah Al Jahid](https://github.com/username "My Github Account")
Enter fullscreen mode Exit fullscreen mode

Abdulah Al Jahid

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

Github link: Github

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

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

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

Inline Style:
Markdown Logo
Reference Style:
Markdown logo

Inline Code Block 

This is inline `code block` using `back-ticks`.
Enter fullscreen mode Exit fullscreen mode

This is inline code block using back-ticks.

Code Blocks and Syntax Highlighting

Alt Text

Normal Code blocks
Enter fullscreen mode Exit fullscreen mode

Bash:

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Javascript:

function add(number1, number2) {
  return number1 + number2;
}
Enter fullscreen mode Exit fullscreen mode

Python:

def add(number1, number2):
  return number1 + number2
Enter fullscreen mode Exit fullscreen mode

List

UL
You can use */-/+ in unordered list

* Item 1
* Item 2
    * Item 2.1
    * Item 2.2
        * Item 2.2.1
Enter fullscreen mode Exit fullscreen mode
  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
      • Item 2.2.1

OL

1. Item 1
2. Item 2
3. Item 3
Enter fullscreen mode Exit fullscreen mode
  1. Item 1
  2. Item 2
  3. Item 3

Table 

| First Name    | Last Name     | Id    |
| ------------- |---------------| ------|
| Mark          | Down          |   1   |
| Abdullah Al   | Jahid         |   2   |
| Awesome       | Table         |   0   |
Enter fullscreen mode Exit fullscreen mode
First Name Last Name Id
Mark Down 1
Abdullah Al Jahid 2
Awesome Table 0

Thanks

Top comments (0)

Read next

madza profile image

12 Open Source Projects You Will Be Amazed to Discover 🔥🧑‍💻

Madza -

brunodevphp profile image

#01 - How to learn Git from scratch

Bruno Felipe Silva -

dazevedo profile image

GitHub Spark: Create Apps with Ease and No Code

Daniel Azevedo -

apilover profile image

Github Spark: The AI Tool That Creates Apps with Spoken Language

Wanda -