https://github.com/atapas/markdown-cheatsheet
A single place for all the markdown syntaxes I have learned so far.
https://github.com/atapas/markdown-cheatsheet
github hacktoberfest markdown open-source
Last synced: 3 months ago
JSON representation
A single place for all the markdown syntaxes I have learned so far.
- Host: GitHub
- URL: https://github.com/atapas/markdown-cheatsheet
- Owner: atapas
- License: mit
- Created: 2022-06-02T02:56:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-26T09:55:57.000Z (about 3 years ago)
- Last Synced: 2025-03-31T06:06:32.001Z (10 months ago)
- Topics: github, hacktoberfest, markdown, open-source
- Homepage: https://tapasadhikary.com
- Size: 1.62 MB
- Stars: 242
- Watchers: 5
- Forks: 82
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](#headings)
2. [Code](#code)
3. [Unordered List of Items](#unordered-list-of-items)
4. [Ordered List of Items](#ordered-list-of-items)
5. [CheckBox Task List](#checkbox-task-list)
6. [Code Block](#code-block)
7. [Strikethrough Text](#strikethrough-text)
8. [Blockquote Text](#blockquote-text)
9. [Bold](#bold)
10. [Italic](#italic)
11. [Bold and Italic](#bold-and-italic)
12. [Link](#link)
13. [Image](#image)
14. [Linking an Image](#linking-an-image)
15. [Emojis](#emojis)
16. [Alerts](#alerts)
17. [Table](#table)
18. [Table With Alignments](#table-with-alignments)
19. [Horizontal Line](#horizontal-line)
20. [HTML](#html)
21. [Embed YouTube Video](#embed-youtube-video)
22. [Mathematical Expressions](#mathematical-expressions)
23. [DropDown](#dropdown)
24. [Diagrams](#diagrams)
25. [FootNote](#footnote)
26. [Comments](#comments)
Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)
[](https://github.com/atapas/markdown-cheatsheet/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
1. Walk
1. Sleep
## CheckBox Task List
**Syntax:**
```
- [X] Code
- [ ] Review
- [ ] Commit
```
**Output:**
- [X] 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:**
```js
function print() {
console.log('This is is a JavaScript Code Block');
}
```
**Example 2:**
````
```bash
# This is bash
echo 1
```
````
**Output:**
```bash
# 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](https://tapasadhikary.com)?
## Image
**Syntax:**
```
```
**Output:**
## Linking an Image
**Syntax:**
```
[](hyperlink)
```
**Output:**
[](https://blog.greenroots.info)
## Image Based on Theme
**Syntax:**
```
```
or
```
```
**Output (try changing themes!):**
## Emojis
**Syntax:**
```
:mango: :lemon: :man: :car:
```
**Output:**
:mango: :lemon: :man: :car:
## Alerts
**Syntax:**
```markdown
> [!NOTE]
> Git commits are snapshots of your code at a given time.
```
**Output:**
> [!NOTE]
> Git commits are snapshots of your code at a given time.
**Syntax:**
```markdown
> [!TIP]
> Use `git status` often to stay aware of your changes.
```
**Output:**
> [!TIP]
> Use `git status` often to stay aware of your changes.
**Syntax:**
```markdown
> [!IMPORTANT]
> Always commit your changes before switching branches to avoid losing work.
```
**Output:**
> [!IMPORTANT]
> Always commit your changes before switching branches to avoid losing work.
**Syntax:**
```markdown
> [!WARNING]
> Don’t use `git push --force` unless you fully understand the consequences.
```
**Output:**
> [!WARNING]
> Don’t use `git push --force` unless you fully understand the consequences.
**Syntax:**
```markdown
> [!CAUTION]
> Renaming branches in shared repositories can confuse collaborators.
```
**Output:**
> [!CAUTION]
> Renaming branches in shared repositories can confuse collaborators.
## Table
**Syntax:**
```
| Fruit | Emoji |
| ----------- | ----------- |
| Mango | :mango: |
| Lemon | :lemon: |
```
**Output:**
| Fruit | Emoji |
| ----------- | ----------- |
| Mango | :mango: |
| Lemon | :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 | :mango: | Sweet and I love it |
| Lemon is good for health | :lemon: | Sour, mix it in the water |
## Horizontal Line
**Syntax:**
```
---
```
**Output:**
---
## HTML
**Syntax:**
```
Yes, you can use allowed raw HTML in mark-down file.
This is a paragraph aligned in the center.
```
**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:**
```
[](YOUTUBE VIDEO LINK)
```
**Output:**
[](https://www.youtube.com/watch?v=OulZeVtZhZQ)
## Mathematical Expressions
1. **Inline expressions:**
**Syntax**
```plain
$<>$
```
Replace `<>` with your expression.
**Example**
```plain
$\sqrt{3}+1$
```
**Output**
$\sqrt{3}+1$
2. **Block Expressions:**
**Syntax**
```plain
$$<>$$
```
**Example**
```plain
$$\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](https://en.wikibooks.org/wiki/LaTeX/Mathematics).
## DropDown
1. DropDown with Open:
**Syntax**
```
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.
```
**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**
```
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.
```
**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:**
```mermaid
graph TD;
A-->B;
B-->C;
C-->D;
D-->E;
```
LR variant
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
```
```
**Output:**
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
```
BT variant
```
```mermaid
graph BT;
A-->B;
B-->C;
C-->D;
D-->E;
```
```
**Output:**
```mermaid
graph BT;
A-->B;
B-->C;
C-->D;
D-->E;
```
RL variant
```
```mermaid
graph RL;
A-->B;
B-->C;
C-->D;
D-->E;
```
```
**Output:**
```mermaid
graph RL;
A-->B;
B-->C;
C-->D;
D-->E;
```
## 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.[^bignote]
[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.
## 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 3.
```
**Output**
This is Line Number 1.
This is Line Number 3.