Skip to content

atapas/markdown-cheatsheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

61 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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(⭐)

Thanks to all stargazers

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:

GreenRoots Blog

Linking an Image

Syntax:

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

Output:

GreenRoots Blog

Image Based on Theme

Syntax:

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

or

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

Output (try changing themes!):

dark mode only image

light mode only image

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:

Forking a Repo

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.

  1. 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,1 and here's a longer one.2

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. ↩

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published