Git Product home page Git Product logo

markdown-cheatsheet's Introduction

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

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] CodeMa
- [ ] 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

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

Mentioning people and teams

You can mention a person or team on GitHub by typing @ plus their username or team name. This will trigger a notification and bring their attention to the conversation. People will also receive a notification if you edit a comment to mention their username or team name.

Footnotes

  1. This is the first footnote. โ†ฉ

  2. Here's one with multiple paragraphs and code. โ†ฉ

markdown-cheatsheet's People

Contributors

amenanajeeb avatar atapas avatar deepakbabani avatar hasnainmakada-99 avatar melvincwng avatar murtaza-arif avatar murtuzaalisurti avatar sachin-chaurasiya avatar susmita-dey avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.