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.
- Headings
- Code
- Unordered List of Items
- Ordered List of Items
- CheckBox Task List
- Code Block
- Strikethrough Text
- Blockquote Text
- Bold
- Italic
- Bold and Italic
- Link
- Image
- Linking an Image
- Emojis
- Table
- Table With Alignments
- Horizontal Line
- HTML
- Embed YouTube Video
- Mathematical Expressions
- DropDown
- Diagrams
- FootNote
- Comments
Many Thanks to all the Stargazers who has supported this project with stars(⭐)
Syntax:
# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6
Output:
Syntax:
`This is Code`
Output:
This is Code
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
Syntax:
1. Eat
1. Walk
1. Sleep
Output:
- Eat
- Walk
- Sleep
Syntax:
- [X] Code
- [ ] Review
- [ ] Commit
Output:
- Code
- Review
- Commit
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 1Syntax:
~~Sharing is NOT about Caring.~~
Output:
Sharing is NOT about Caring.
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!
Syntax:
**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**
Output:
DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.
Syntax:
*It is Written in Italics*
Output:
It is Written in Italics
Syntax:
***You Can Combine Bold and Italics***
Output:
You Can Combine Bold and Italics
Syntax:
Did you know I have [Website](https://tapasadhikary.com)?
Output:
Did you know I have Website?
Syntax:
Output:
Syntax:
[](hyperlink)
Output:
Syntax:
or
Output (try changing themes!):
Syntax:
:mango: :lemon: :man: :car:
Output:
🥭 🍋 👨 🚗
Syntax:
| Fruit | Emoji |
| ----------- | ----------- |
| Mango | :mango: |
| Lemon | :lemon: |
Output:
| Fruit | Emoji |
|---|---|
| Mango | 🥭 |
| Lemon | 🍋 |
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 |
Syntax:
---
Output:
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.Syntax:
[](YOUTUBE VIDEO LINK)
Output:
-
Inline expressions:
Syntax
$<<mathematical expression>>$Replace
<<mathematical expression>>with your expression.Example
$\sqrt{3}+1$Output
$\sqrt{3}+1$ -
Block Expressions:
Syntax
$$<<mathematical expression>>$$Example
$$\sqrt{3}+1$$Output
$$\sqrt{3}+1$$ -
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 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.
- 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.
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;
LR variant
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
```
Output:
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
BT variant
```mermaid
graph BT;
A-->B;
B-->C;
C-->D;
D-->E;
```
Output:
graph BT;
A-->B;
B-->C;
C-->D;
D-->E;
RL variant
```mermaid
graph RL;
A-->B;
B-->C;
C-->D;
D-->E;
```
Output:
graph RL;
A-->B;
B-->C;
C-->D;
D-->E;
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
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.