Markdown Monster
One Cheat sheet for all markdown syntax I have learned so far.
Table of contents
- What is Markdown?
- ⚡ Headings⚡
- I am your Heading 1
- Heading 2
Hello World!
This Blog will serve you a Markdown
cheat sheet along with its use cases to help you create beautiful blogs on platforms such as Hash Node and build awesome README files on GitHub.
What is Markdown?
It is a lightweight markup language ( just like HTML ) simply used to format text. By applying the below markdown syntax, You will be able to create syntactically correct documentation files.
Let's get started with THE HEAD,
⚡ Headings⚡
Syntax : (#)
# I am your Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Output Preview screen view:
I am your Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The # count ranges from 1 to 6 for creating different-sized headings ( big to small ).
⚡ Italic ⚡
Syntax : Single ( * ) or ( _ )
*Italic Text*
_Another Italic text_
Output
Italic Text
Another Italic Text
You can use any syntax you want, there's no significance for one over the other, I promise✋
⚡ Bold ⚡
Syntax : Double ( ** ) or ( __ )
**This is a Bold Text **
__Also Bold__
Output
This is a Bold Text
Also Bold
⚡ Bold and Italic ⚡
Syntax: Combine ( * _ ) to have a string with both bold and italic text
*_I am both Bold and Italic_*
Output
I am both Bold and Italic
⚡ Separator ⚡
Define a horizontal line with three ---
(three hyphens), ***
(three asterisks), or ___
(three underscores), serves as a divider/separator between two sections.
--- (or)
*** (or)
___
Output
⚡Escaping Markdown Syntax⚡
Syntax: prepend backslash (\
) before the asterisks (\)* to escape the markdown text
\*This is a Plain text*/
Output
*This is a Plain Text *
⚡ Strike through ⚡
Syntax: Tildes ~ ~
to wrap your strike through text.
~~Text to strike~~
Output
Text to strike
⚡ Inline code Block ⚡
Syntax: Use backticks (`) around the inline code
`<p> I am a Paragraph </p>`
Output
<p> I am a Paragraph </p>
⚡ List ⚡
Unordered Lists are Bullet List
Syntax: Use a hyphen -
or *
asterisk with space as a prefix to the list item.
- Unordered Bullet List 1
* Also a unordered Bullet List 2
Unordered Bullet List 1
Also unordered Bullet List 2
You can further nest them by simply indenting ( A tab space on a new line ) as shown below
- Eat
- Sleep
- Code in your sleep
- Code Again
Eat
Sleep
- Code in your sleep
Code Again
Ordered Lists are Numbered List
Number an ordered list of items, with prefixed numbers ( You don't even have to number them right, the markup will do the job for you ).
1. One
1. Two
3. Three
One
Two
Three
⚡ Link⚡
Append any link with the below markdown link syntax
[Link Text]( link url "hover text")
[markdown](https://www.markdownguide.org "markdown")
Output
⚡ Image⚡
Syntax : ( ! ) is prefixed around [ ] to display an image
![Alt text](/preview-markdown/logo.svg)
![Markdown Logo](https://icons8.com/icon/uADJvOMNIZPu/markdown)
Output
⚡ Quotation⚡
Syntax: "Quote" text with (>) before the text
> Kindness always wins
Output
Kindness always wins
Moving on to a few Github Markdowns
⚡ Code Blocks⚡
Syntax: add ``` along with your code ```
```
const text = " Welcome to my blog "
console.log(text);
```
Output
const text = " Welcome to my blog "
console.log(text);
Language-specific highlights
can be added by type scripting the name of the language after ```
Syntax :
``` javascript
const text = " This is written in JS "
console.log(text);
```
Output
const text = " This is written in JS "
console.log(text);
⚡Tables ⚡
Syntax: Use ( | ) Pipe before every Table entry, and :---
to Left align, :---:
to center align and ---:
to Right-align the table entries
| Left aligned | Center aligned | Right aligned |
| :--- | :---: |---:|
| Left Column | Center Column | Right Column|
| Left Column | Center Column| Right Column|
Output
Left aligned | Center aligned | Right aligned |
Left Column | Center Column | Right Column |
Left Column | Center Column | Right Column |
⚡Collapsable content ⚡
<details>
<summary> Click to view Expand text </summary>
May the Force be with you
</details>
Output
Click to view Expand text
Conclusion
I hope this article was helpful to you. Markup is great for documenting, formatting and giving meaningful structure to your text files. To know more please refer to Markdown Documentation.
Thank you for reading, If you have any questions or suggestions, please leave them in the comments.