nxmxgoldxx/markdown-cheatsheet

A single place for all the markdown syntaxes I have learned so far.

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

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:

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.