---
# System prepended metadata

title: HackMD Tutorial
tags: [Tag]

---

# HackMD Tutorial

## Headline
# H1
## H2
### H3
#### H4
##### H5
###### H6

###### tags: `Tag`

## Citation
> C1
>> C2
>>> C3
>>>> C4

> color=#3b75c6 [color=#3b75c6]

## Icon
### ::
:video_game: video_game

:arrow_right: arrow_right

:arrow_upper_left: arrow_upper_left

:arrow_upper_right: arrow_upper_right

:memo: memo

:rocket: rocket

:bulb: bulb

:tada: tada

:pushpin: pushpin

:link: link

### html i
<i class="fa fa-share-alt"></i> fa fa-share-alt

## List
### to do list
- [x] 1
- [ ] 2
- [ ] 3

### item list
- item"-"
+ item"+"
* item"*"

### number list
1. number one
2. nember two
3. number three

### nested list
1. nest1
    1. nest2
        1. nest3

- nest1
    - nest2
        - nest3

## Font effect
- **Bold**
- __Bold__
- *Italic*
- _Italic_
- ***Bold & Italic***
- ___Bold & Italic___
- Super^script^
- Sub~script~
- ++underline++
- ~~Crossed~~(~~)
- ==Highlight==
- <font color="#f00">color</font> ([color picker](https://htmlcolorcodes.com/color-picker/), [w3schools](https://www.w3schools.com/colors/colors_picker.asp))

## New line
line1 <br> line2

## Block
:::success
long block
:::

`short block`

## Link
### image link
:::info
![](https://i.imgur.com/Cnle9f9.png)
[![image title](imageurl)](link)
:::

![permalink setting demo](https://i.imgur.com/PjUhQBB.gif)

### text link
:::info
[link title](https://hackmd.io/c/tutorials) 
:::

## Divider
---
***

## Table
| Features          | Tutorials               |
| ----------------- |:----------------------- |
| GitHub Sync       | [:link:][GitHub-Sync]   |
| Browser Extension | [:link:][HackMD-it]     |
| Book Mode         | [:link:][Book-mode]     |
| Slide Mode        | [:link:][Slide-mode]    | 
| Share & Publish   | [:link:][Share-Publish] |

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note


## LaTeX for formulas
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$

## Escape symbol(\)
\$
\@


## Code block with color and line numbers：
```javascript=16
var s = "JavaScript syntax highlighting";
alert(s);
```

## UML diagrams
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?
```

## Video
{%youtube PJuNmlE74BQ %}


