# Basic Markdown Cheatsheet (example of Heading 1)

## 1. Heading (example of Heading 2)

***Syntaxes***

```
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
```

***Showcases***

### h3 Heading

#### h4 Heading

**h5 Heading**

**h6 Heading**

## 2. Paragraphs

*Notes:*

* To create paragraphs, use a blank line to separate one or more lines of text.
* Don't ident paragraphs with spaces or tabs

***Syntaxes***

```
This is the first paragraph.

This is the second paragraph
```

***Showcases***

This is the first paragraph.

This is the second paragraph

## 3 Line Break

*Notes:*

* To create a line break, end a line with two or more spaces, and then type return
* *Or* use the `<br>` HTML tag

***Syntaxes***

```
This is the first line. 
And this is the second line.
```

***Showcases***

This is the first line.\
And this is the second line.

***Alternative Syntaxes***

```
First line with the HTML tag after.<br>
And the next line.
```

***Showcases***

First line with the HTML tag after.\
&#x20;And the next line.

## 4. Emphasis

***Syntaxes***

```
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
We have **bold***italic*
This text is ***really important***
This text is ___really important___
This text is __*really important*__
This text is **_really important_**
```

***Showcases***

**This is bold text**\
**This is bold text**\
\&#xNAN;*This is italic text*\
\&#xNAN;*This is italic text*\
We have **bold\***&#x69;talic\
*This text is \*\**&#x72;eally important\
***This text is really important***\
***This text is \_\_*****really important\*\_\_**\
**This text is** *really important*\*\*

## 5. Blockquotes

*Notes:*

* Space is needed after the marker `>`;
* You could just add only one `>` at the first line;
* Blockquotes can be nested
* Blockquotes can contain multiple paragraphs. Add a >  between the paragraphs.
* Blockquotes can contain other Markdown formatted elements. But not all elements can be used.

***Syntaxes***

```
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
```

***Showcases***

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

***Syntaxes***

```
> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
```

***Showcases***

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

***Syntaxes***

```
> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.
```

***Showcases***

> #### The quarterly results look great!
>
> * Revenue was off the chart.
> * Profits were higher than ever.
>
>   *Everything* is going according to **plan**.

## 6. Lists

### 6.1. Unordered

***Syntaxes***

```
+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace
+ Add text under an item  
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces:
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.
```

***Showcases***

* To start a list, there should be an empty line above
* Create a list by starting a line with `+`, `-`, or `*`
* Changing the sign will add a linespace
* Add text under an item &#x20;

  This is a text under an item. Notice that there are two spaces at the end above.
* Sub-lists are made by indenting 2 spaces:
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.

### 6.2. Ordered

***Syntaxes***

```
1. Item 1
1. Item 2  
Notice that the sequence number is irrelevant. 
Markdown will change the sequence automatically when renderring. 
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
    1. Item 3a
    2. Item 3b
8. Any number for item 4
```

***Showcases***

1. Item 1
2. Item 2 &#x20;

   Notice that the sequence number is irrelevant. &#x20;

   Markdown will change the sequence automatically when renderring. &#x20;

   Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
   1. Item 3a
   2. Item 3b
4. Any number for item 4

***Syntaxes***

```
57. will started with offset 57
1. so it will be 58
```

***Showcases***

1. will started with offset 57
2. so it will be 58

## 7. Elements in Lists

*Notes:*

* To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab

***Syntaxes***

```
* This is the first list item.
* Here's the second list item.
    I need to add another paragraph below the second list item.
* And here's the third list item.
```

***Showcases***

* This is the first list item.
* Here's the second list item.

  I need to add another paragraph below the second list item.
* And here's the third list item.

***Showcases***

* This is the first list item.
* Here's the second list item.

  I need to add another paragraph below the second list item.
* And here's the third list item.

***Showcases***

* This is the first list item.
* Here's the second list item.

  > A blockquote would look great below the second list item.
* And here's the third list item.

***Syntaxes***

```
1.  Open the file containing the Linux mascot.
2.  Linux mascot called Tux.
    ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
3.  Tux is cool.
```

***Showcases***

1. Open the file containing the Linux mascot.
2. Linux mascot called Tux.

   ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
3. Tux is cool.

*But, for text element in ordered list, add five spaces*

1. This is the first list item.
2. Here's the second list item.

   I need to add another paragraph below the second list item.
3. And here's the third list item.

*But, for quote in ordered list, add five spaces*

1. This is the first list item.
2. Here's the second list item.

   > A blockquote would look great below the second list item.
3. And here's the third list item.

*But, for code blocks in the lists, add eight spaces or two tabs.*

1. Open the file.
2. Find the following code block on line 21:

   ```
   <html>
     <head>
       <title>Test</title>
     </head>
   ```
3. Update the title to match the name of your website.

## 8. Code

*Notes:*

* Inline codes is written inside \` \`
* or idented by add four spaces or one tab before

***Syntaxes***

```
This is inline `code`.
```

***Showcases***

This is inline `code`.

***Syntaxes***

```
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
```

***Showcases***

```
// Some comments
line 1 of code
line 2 of code
line 3 of code
```

***Syntaxes***

```
    <html>
      <head>
        <title>Test</title>
      </head>
```

***Showcases***

```
<html>
  <head>
    <title>Test</title>
  </head>
```

## 9. Links

**Example**

This is [link](https://example.com/)\
This is [link with title](https://example.com/)

*Or, directly put the link*

<https://example.com/>\
<fake@example.com>

*Or with `<>`*

<https://www.markdownguide.org>\
<fake@example.com>

*But, to prevent automated linking*

`https://www.example.com`

*Or add emphasize*

I love supporting the [**EFF**](https://eff.org).\
This is the [*Markdown Guide*](https://www.markdownguide.org).\
See the section on [`code`](#code).

## 10. Reference-style Links

I know [Indonesia](https://en.wikipedia.org/wiki/Indonesia)\
I also know [etymology of Indonesia](https://en.wikipedia.org/wiki/Indonesia#Etymology)\
I knew [History of Indonesia](https://en.wikipedia.org/wiki/Indonesia#History)

*Or, put reference in text*

It was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle), and that means comfort.

*But, be careful with spaces in the links, put `%20` as space*

[example %20 link](https://www.example.com/my%20great%20page)\
[example without %20](https://www.example.com/my%20great%20page)

## 11. Images

*Notes:*

* It is not recommended to use image links in reference format. Some apps will not preview those images.
* Specifying size of image is supported only in some extended markdown (such as *markdown-it*).

***Syntaxes***

```
![Image Alt Text](/url/to/image.png "Optional Text")
![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)
![Image Alt Text](/url/to/image.png =800x600)
![Image Alt Text](/url/to/image.png "Image specified with width" =800x)
![Image Alt Text](/url/to/image.png "Image specified with height" =x600)
```

***Showcases***

![Wikipedia](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)\
!\[Wikipedia]\(<https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png> "Wikipedia logo with specific size" =60x60)

***Syntaxes***

```
![Image Alt Text][id1]  
![Image Alt Text][id2]
```

***Showcases***

![Wikipedia Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)\
![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)

## 12. Escaping Characters

*Note:*

* add a backslash `\` in front of the character.

**Example**

\* star\
\ backslash itself\
\` backtick\
{ } curly braces\
! exclamation mark

## 13. HTML Code

**Example**

This **word** is bold. This *word* is italic.

## 14. Horizontal Rules

**Example**
