Markdown Monster

Markdown Monster

One Cheat sheet for all markdown syntax I have learned so far.

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
  1. One

  2. Two

  3. Three

Append any link with the below markdown link syntax

[Link Text]( link url "hover text")
[markdown](https://www.markdownguide.org "markdown")

Output

markdown

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 alignedCenter alignedRight aligned
Left ColumnCenter ColumnRight Column
Left ColumnCenter ColumnRight Column

Collapsable content

<details>
<summary> Click to view Expand text </summary>
May the Force be with you
</details>

Output

Click to view Expand text
May the force be with you

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.