vuepress 블로그 마크다운
이탤릭체, 볼드, 취소선, 밑줄
*이탤릭체*
_이탤릭체_
**볼드**
__볼드__
~~취소선~~
<u>밑줄</u>
<mark>형광펜</mark>1
2
3
4
5
6
7
2
3
4
5
6
7
이탤릭체
이탤릭체
볼드
볼드
취소선
밑줄
형광펜
표
| |<center>right</center>|<center>left</center>|center |
|----|---------------------:|:--------------------|:--------------------:| # 차례로 오른쪽, 왼쪽, 가운데 정렬
|row1|data |data |data |
|row2|data2-1 |data2-2 |data2-3 |
|row3|data 3-1 |data 3-2 |data 3-3 |1
2
3
4
5
2
3
4
5
| center | |||
|---|---|---|---|
| row1 | data | data | data |
| row2 | data2-1 | data2-2 | data2-3 |
| row3 | data 3-1 | data 3-2 | data 3-3 |
escape
backslash(\)를 사용
const message = `제 이름은 ${name}입니다`;
const message = `제 이름은 ${name}입니다`;
image
1
list(*, +, -)
- 1단계
- 2단계
- 3단계
- 4단계1
2
3
4
2
3
4
- 1단계
- 2단계
- 3단계
- 4단계
- 3단계
- 2단계
Links
<!-- relative path -->
[Home](../README.md)
[Config Reference](../reference/config.md)
[Getting Started](./getting-started.md)
<!-- absolute path -->
[Guide](/guide/README.md)
[Config Reference > markdown.links](/reference/config.md#links)
<!-- URL -->
[GitHub](https://github.com)1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Emoji :smiley:
:tada:1
:tada:
Table of Contents
1
Code Blocks
Line Highlighting
```ts{1,6-8}
import { defaultTheme, defineUserConfig } from 'vuepress'
export default defineUserConfig({
title: 'Hello, VuePress',
theme: defaultTheme({
logo: 'https://vuejs.org/images/logo.png',
}),
})
```1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- Line ranges: {5-8}
- Multiple single lines: {4,7,9}
- Combined: {4,7-13,16,23-27,40}
Components
<Badge text="demo" />
- VuePress - <Badge type="tip" text="v2" vertical="top" />
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
- VuePress - <Badge type="error" text="v2" vertical="bottom" />1
2
3
4
2
3
4
- VuePress - v2
- VuePress - v2
- VuePress - v2
Code Groups and Code Blocks 1.6.0+
yarn create vuepress-site [optionalDirectoryName]1
npx create-vuepress-site [optionalDirectoryName]1
Default Title
This is a tip
This is a warning
This is a dangerous warning
This is a details block, which does not work in IE / Edge
STOP
Danger zone, do not proceed
Click me to view the code
console.log("Hello, VuePress!");1
<div class="custom-block tip">
<p class="custom-block-title">This is a tip</p>
</div>
<div class="custom-block warning">
<p class="custom-block-title">This is a warning</p>
</div>
<div class="custom-block danger">
<p class="custom-block-title">This is a dangerous warning</p>
</div>
<details class="custom-block details">
<summary>This is a details block, which does not work in IE / Edge</summary>
</details>
<div class="custom-block danger">
<p class="custom-block-title">STOP</p>
Danger zone, do not proceed
</div>
<details class="custom-block details">
<summary>Click me to view the code</summary>
```js
console.log("Hello, VuePress!");
```
</details>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38