README.md

Table of Contents

markdown-cheatsheet is a single place for all the markdown syntaxes I have learned so far. Sharing publicly so that you also know about them and use.

1. Headings
2. Code
3. Unordered List of Items
4. Ordered List of Items
5. CheckBox Task List
6. Code Block
7. Strikethrough Text
8. Blockquote Text
9. Bold
10. Italic
11. Bold and Italic
12. Link
13. Image
14. Linking an Image
15. Emojis
16. Table
17. Table With Alignments
18. Horizontal Line
19. HTML
20. Embed YouTube Video
21. Mathematical Expressions
22. DropDown
23. Diagrams
24. FootNote
25. Comments

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

Headings

Syntax:

# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6

Output:

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5

H6 - Heading 6

Code

Syntax:

`This is Code`

Output:

This is Code

Unordered List of Items

Syntax:

- Milk
- Tea
- Beer

Output:

• Milk
• Tea
• Beer

Syntax:

This is an alternate syntax to create unordered list items.

* JavaScript
* TypeScript
* ReactJs

Output:

• JavaScript
• TypeScript
• ReactJs

Ordered List of Items

Syntax:

1. Eat
1. Walk
1. Sleep

Output:

1. Eat
2. Walk
3. Sleep

CheckBox Task List

Syntax:

- [X] Code
- [ ] Review
- [ ] Commit

Output:

• Code
• Review
• Commit

Code Block

Syntax:

```
This is a code block. You can create for code syntaxes like JavaScript, HTML, CSS, Bash, and many more.
```

Output:

This is a code block. You can create for code syntaxes like JavaScript, HTML, CSS, Bash, and many more.

In order to highlight the code, you can add language name at the start of the backticks as in the following examples.

Example 1:

```js
function print() {
 console.log('This is is a JavaScript Code Block');
}
```

Output:

function print() {
 console.log('This is is a JavaScript Code Block');
}

Example 2:

```bash
# This is bash
echo 1
```

Output:

# This is bash
echo 1

Strikethrough Text

Syntax:

~~Sharing is NOT about Caring.~~

Output:

Sharing is NOT about Caring.

Blockquote Text

Syntax:

> When I say something, I mean it. When I mean it, I do it. When I do, I may fail. When I fail, I start talking about it again!

Output:

When I say something, I mean it. When I mean it, I do it. When I do, I may fail. When I fail, I start talking about it again!

Bold

Syntax:

**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**

Output:

DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.

Italic

Syntax:

*It is Written in Italics*

Output:

It is Written in Italics

Bold and Italic

Syntax:

***You Can Combine Bold and Italics***

Output:

You Can Combine Bold and Italics

Link

Syntax:

Did you know I have [Website](https://tapasadhikary.com)?

Output:

Did you know I have Website?

Image

Syntax:

![alt text](image)

Output:

Linking an Image

Syntax:

[![alt text](image)](hyperlink)

Output:

Image Based on Theme

Syntax:

![alt text](image#gh-dark-mode-only)

or

![alt text](image#gh-light-mode-only)

Output (try changing themes!):

Emojis

Syntax:

:mango: :lemon: :man: :car:

Output:

🥭 🍋 👨 🚗

Table

Syntax:

| Fruit | Emoji |
| ----------- | ----------- |
| Mango | :mango: |
| Lemon | :lemon: |

Output:

Fruit	Emoji
Mango	🥭
Lemon	🍋

Table With Alignments

Syntax:

| Fruit(left)      | Emoji(center) | Taste(right)     |
| :---        |    :----:   |          ---: |
| Mango is the king of Fruits      | :mango:       | Sweet and I love it  |
| Lemon is good for health   | :lemon:        | Sour, mix it in the water     |

Output:

Fruit(left)	Emoji(center)	Taste(right)
Mango is the king of Fruits	🥭	Sweet and I love it
Lemon is good for health	🍋	Sour, mix it in the water

Horizontal Line

Syntax:

---

Output:

---

HTML

Syntax:

<p align="center">
 Yes, you can use allowed raw HTML in mark-down file.
 This is a paragraph aligned in the center.
</p>

Output:

Yes, you can use allowed raw HTML in mark-down file. This is a paragraph aligned in the center.

Heading

The details are here.

Embed YouTube Video

Syntax:

[![Alt Text](Thumbnail Image)](YOUTUBE VIDEO LINK)

Output:

Mathematical Expressions

1. Inline expressions:

   Syntax

   $<<mathematical expression>>$
   

   Replace <<mathematical expression>> with your expression.

   Example

   $\sqrt{3}+1$
   

   Output

   $\sqrt{3}+1$

2. Block Expressions:

   Syntax

   $$<<mathematical expression>>$$
   

   Example

   $$\sqrt{3}+1$$
   

   Output

   $$\sqrt{3}+1$$

3. Mixed Expressions:

   Syntax

   When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are 
   
   $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
   

   Output

   When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

   $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

For more information on how to write mathematical expressions, visit this page.

DropDown

1. DropDown with Open:
   Syntax

<details open>
<summary>Want to know more? </summary>
<br>
This is called a DropDown.
<br>Yes! This is possible using Markdown.
<br>You can hide some content from the user.
<br>They can view the detailed message only when they click.
</details>

Output

Want to know more?

This is called a DropDown.
Yes! This is possible using Markdown.
You can hide some content from the user.
They can view the detailed message only when they click.

Explanation
The details tags are used to indicate that we want a dropdown.
The keyword open in details tag is causing the dropdown to stay opened even before the user clicks on it, which messes up the fun!
It looks like a question and answer - this is not our purpose, we fix this in the below example.
Between the summary tags, we write the heading/content to be displayed.
After summary, we can include the detailed content.
However, when a user clicks on the arrow, the detailed content gets hidden; with another the click, the content is displayed again.

2. DropDown without Open:
   Syntax

<details>
<summary>Want to know more? Click Here</summary>
<br>
This is called a DropDown.
<br>Yes! This is possible using Markdown.
<br>You can hide some content from the user.
<br>They can view the detailed message only when they click.
</details>

Output

Want to know more? Click Here

This is called a DropDown.
Yes! This is possible using Markdown.
You can hide some content from the user.
They can view the detailed message only when they click.

Explanation
The details tags are used to indicate that we want a dropdown.
This is what we require, the detailed content should be hidden initially. With a click, the information should be displayed.
Between the summary tags, we write the heading/content to be displayed inside or what we refer to as DROPDOWN TITLE.
After summary, we can include the detailed content, this will be shown only when the user clicks the dropdown title.

Diagrams

Syntax:

• Use the mermaid syntax
• Additional syntax: TD means Top Down, LR means Left Right, BT means Bottom Top, RL means Right Left

TD variant

    ```mermaid
        graph TD;
            A-->B;
            B-->C;
            C-->D;
            D-->E;
    ```

Output:

       graph TD;
           A-->B;
           B-->C;
           C-->D;
           D-->E;

Loading

LR variant

    ```mermaid
        graph LR;
            A-->B;
            B-->C;
            C-->D;
            D-->E;
    ```

Output:

       graph LR;
           A-->B;
           B-->C;
           C-->D;
           D-->E;

Loading

BT variant

    ```mermaid
        graph BT;
            A-->B;
            B-->C;
            C-->D;
            D-->E;
    ```

Output:

       graph BT;
           A-->B;
           B-->C;
           C-->D;
           D-->E;

Loading

RL variant

    ```mermaid
        graph RL;
            A-->B;
            B-->C;
            C-->D;
            D-->E;
    ```

Output:

       graph RL;
           A-->B;
           B-->C;
           C-->D;
           D-->E;

Loading

FootNote

Explanation:
Footnotes allow you to add notes and references without cluttering the body of the document.
When you create a footnote, a superscript number with a link appears where you added the footnote reference.
Readers can click the link to jump to the content of the footnote at the bottom of the page.

Syntax:

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

Output:

Here's a simple footnote,¹ and here's a longer one.²

Comments

Explanation:
Comments are text notes added to a program or a document to provide explanatory information.
You can hide content from the rendered Markdown by placing the content in a comment.

Syntax

This is Line Number 1. 
<!---This is Line Number 2 and would not be rendered as this is a comment. --->
This is Line Number 3.

Output

This is Line Number 1.

This is Line Number 3.

Footnotes

1. This is the first footnote. ↩

2. Here's one with multiple paragraphs and code. ↩