====== Markdown Syntax ======

{{template>:meta:template:pageinfo#tpl
|desc=Introduce the markdown syntax. __The [[https://www.dokuwiki.org/plugin:mdpage\|mdpage]] plugin has been removed due to compatibility issues. So this page is not rendered properly__.}}

<markdown>
# Markdown

## Tools

### VS Code

If you edit markdown by **[VS Code](https://code.visualstudio.com/)**, here are
some of the things you can do to increase your productivity:
+ Install extension `Markdown All in One` and `Markdown Preview Github Styling`.
+ Preview the rendered page by pressing `<ctrl>` + `<shift>` + `<v>` at the same
    time.

## How to

### Emphasize words or sentences

|***Syntax***|***Rendered***|
|:----:|:------:|
|\*italic\*|*italic*|
|\*\*bold\*\*|**bold**|
|\*\*\*bold & italic\*\*\*|***bold & italic***|
|\`code\`|`code`|

### Add a link `[]()`

The display name of the link is wrapped in `[]`, and the link is wrapped in `()`
after the display name.<br>
For example, you can use the following syntax to add a link of `VS Code`.<br>

|***Syntax***|***Rendered***|
|:---:|:---:|
|`[VS Code](https://code.visualstudio.com/)`|[VS Code](https://code.visualstudio.com/)|

### Add an in-page link `[](#)`

If you want to add an in-page link to the `How to` chapter on this page, you
would use the following syntax.

|***Syntax***|***Rendered***|
|:---:|:---:|
|`[How to](#how-to)`|[How to](#how-to)|

When you click on the link in the above table, you will jump to the `How to`
chapter.

### Add an image `![]()`
The preview words before the image is loaded is wrapped in `[]`, and the path
of the image is wrapped in `()`.

|***Syntax***|***Rendered***|
|:---:|:---:|
|`![github-desktop icon](markdown:github-desktop.png)`|![github-desktop icon](markdown:github-desktop.png)|

### Create a table `|||` `|---|---|` `|||`

***Syntax***<br>
```
|Table Head1|Table Head2|Table Head3|Table Head4|
|---|:---:|:---|---:|
|`---` - align default|`:---:` - aligh center|`:---` - align left|`---:` - align right|
|TD1-1|TD1-2|TD1-3|TD1-4|
|TD2-1|TD2-2|TD2-3|TD2-4|
```

***Rendered***<br>

|Table Head1|Table Head2|Table Head3|Table Head4|
|---|:---:|:---|---:|
|`---` - align default|`:---:` - aligh center|`:---` - align left|`---:` - align right|
|TD1-1|TD1-2|TD1-3|TD1-4|
|TD2-1|TD2-2|TD2-3|TD2-4|

### Create an unordered list `+` `-` `*`

You can replace the `+` in the following syntax using `-` or `*`.<br>
***Syntax***<br>
```
+ 1
    + 1.1
    + 1.2
+ 2
    + 2.1
```

***Rendered***<br>
+ 1
    + 1.1
    + 1.2
+ 2
    + 2.1

### Create an ordered list `1.` `2.` ...

***Syntax***<br>
```
1. a
    1. aa
    2. ab
2. b
```

***Rendered***<br>
1. a
    1. aa
    2. ab
2. b
</markdown>