Skip to content

Commit 5c7a3d8

Browse files
meteorlxymeteorlxy
committed
docs(theme-default): add markdown reference
1 parent 48c085a commit 5c7a3d8

File tree

8 files changed

+256
-0
lines changed

8 files changed

+256
-0
lines changed

‎docs/.vuepress/configs/navbar/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const en: NavbarConfig = [
3535
'/reference/default-theme/config.md',
3636
'/reference/default-theme/frontmatter.md',
3737
'/reference/default-theme/components.md',
38+
'/reference/default-theme/markdown.md',
3839
],
3940
},
4041
{

‎docs/.vuepress/configs/navbar/zh.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const zh: NavbarConfig = [
3232
'/zh/reference/default-theme/config.md',
3333
'/zh/reference/default-theme/frontmatter.md',
3434
'/zh/reference/default-theme/components.md',
35+
'/zh/reference/default-theme/markdown.md',
3536
],
3637
},
3738
{

‎docs/.vuepress/configs/sidebar/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export const en: SidebarConfig = {
6060
'/reference/default-theme/config.md',
6161
'/reference/default-theme/frontmatter.md',
6262
'/reference/default-theme/components.md',
63+
'/reference/default-theme/markdown.md',
6364
],
6465
},
6566
],

‎docs/.vuepress/configs/sidebar/zh.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const zh: SidebarConfig = {
6363
'/zh/reference/default-theme/config.md',
6464
'/zh/reference/default-theme/frontmatter.md',
6565
'/zh/reference/default-theme/components.md',
66+
'/zh/reference/default-theme/markdown.md',
6667
],
6768
},
6869
],

‎docs/reference/default-theme/components.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,6 @@ You must add an empty line between the starting tag of `<CodeGroupItem>` and the
101101
All content must be valid Markdown first, and then a Vue SFC.
102102

103103
Learn more: [Advanced > Markdown and Vue SFC](../../guide/advanced/markdown.md)
104+
105+
Alternatively, you can use the [custom containers](./markdown.md#custom-containers).
104106
:::

‎docs/reference/default-theme/markdown.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Markdown
2+
3+
## Custom Containers
4+
5+
- Usage:
6+
7+
```md
8+
::: <type> [title]
9+
[content]
10+
:::
11+
```
12+
13+
The `type` is required, and the `title` and `content` are optional.
14+
15+
Supported `type` :
16+
- `tip`
17+
- `warning`
18+
- `danger`
19+
- `details`
20+
- Alias of [CodeGroup](./components.md#codegroup) and [CodeGroupItem](./components.md#codegroupitem):
21+
- `code-group`
22+
- `code-group-item`
23+
24+
- Example 1 (default title):
25+
26+
**Input**
27+
28+
```md
29+
::: tip
30+
This is a tip
31+
:::
32+
33+
::: warning
34+
This is a warning
35+
:::
36+
37+
::: danger
38+
This is a dangerous warning
39+
:::
40+
41+
::: details
42+
This is a details block, which does not work in IE / Edge
43+
:::
44+
```
45+
46+
**Output**
47+
48+
::: tip
49+
This is a tip
50+
:::
51+
52+
::: warning
53+
This is a warning
54+
:::
55+
56+
::: danger
57+
This is a dangerous warning
58+
:::
59+
60+
::: details
61+
This is a details block, which does not work in IE / Edge
62+
:::
63+
64+
- Example 2 (custom title):
65+
66+
**Input**
67+
68+
````md
69+
::: danger STOP
70+
Danger zone, do not proceed
71+
:::
72+
73+
::: details Click me to view the code
74+
```js
75+
console.log('Hello, VuePress!')
76+
```
77+
:::
78+
````
79+
80+
**Output**
81+
82+
::: danger STOP
83+
Danger zone, do not proceed
84+
:::
85+
86+
::: details Click me to view the code
87+
```js
88+
console.log('Hello, VuePress!')
89+
```
90+
:::
91+
92+
- Example 3 (code group alias):
93+
94+
**Input**
95+
96+
````md
97+
:::: code-group
98+
::: code-group-item FOO
99+
```js
100+
const foo = 'foo'
101+
```
102+
:::
103+
::: code-group-item BAR
104+
```js
105+
const bar = 'bar'
106+
```
107+
:::
108+
::::
109+
````
110+
111+
**Output**
112+
113+
:::: code-group
114+
::: code-group-item FOO
115+
```js
116+
const foo = 'foo'
117+
```
118+
:::
119+
::: code-group-item BAR
120+
```js
121+
const bar = 'bar'
122+
```
123+
:::
124+
::::

‎docs/zh/reference/default-theme/components.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,6 @@ npm install
101101
所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。
102102

103103
了解更多： [深入 > Markdown 与 Vue SFC](../../guide/advanced/markdown.md)
104+
105+
或者你可以选择使用 [自定义容器](./markdown.md#自定义容器) 。
104106
:::

‎docs/zh/reference/default-theme/markdown.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Markdown
2+
3+
## 自定义容器
4+
5+
- 使用：
6+
7+
```md
8+
::: <type> [title]
9+
[content]
10+
:::
11+
```
12+
13+
`type` 是必需的， `title` 和 `content` 是可选的。
14+
15+
支持的 `type` 有：
16+
- `tip`
17+
- `warning`
18+
- `danger`
19+
- `details`
20+
- [CodeGroup](./components.md#codegroup) 和 [CodeGroupItem](./components.md#codegroupitem) 的别名：
21+
- `code-group`
22+
- `code-group-item`
23+
24+
- 示例 1 （默认标题）：
25+
26+
**输入**
27+
28+
```md
29+
::: tip
30+
这是一个提示
31+
:::
32+
33+
::: warning
34+
这是一个警告
35+
:::
36+
37+
::: danger
38+
这是一个危险警告
39+
:::
40+
41+
::: details
42+
这是一个 details 标签，在 IE / Edge 中不生效
43+
:::
44+
```
45+
46+
**输出**
47+
48+
::: tip
49+
这是一个提示
50+
:::
51+
52+
::: warning
53+
这是一个警告
54+
:::
55+
56+
::: danger
57+
这是一个危险警告
58+
:::
59+
60+
::: details
61+
这是一个 details 标签，在 IE / Edge 中不生效
62+
:::
63+
64+
- 示例 2 （自定义标题）：
65+
66+
**输入**
67+
68+
````md
69+
::: danger STOP
70+
危险区域，禁止通行
71+
:::
72+
73+
::: details 点击查看代码
74+
```js
75+
console.log('你好，VuePress！')
76+
```
77+
:::
78+
````
79+
80+
**输出**
81+
82+
::: danger STOP
83+
危险区域，禁止通行
84+
:::
85+
86+
::: details 点击查看代码
87+
```js
88+
console.log('你好，VuePress！')
89+
```
90+
:::
91+
92+
- 示例 3 （Code Group 别名）：
93+
94+
**输入**
95+
96+
````md
97+
:::: code-group
98+
::: code-group-item FOO
99+
```js
100+
const foo = 'foo'
101+
```
102+
:::
103+
::: code-group-item BAR
104+
```js
105+
const bar = 'bar'
106+
```
107+
:::
108+
::::
109+
````
110+
111+
**输出**
112+
113+
:::: code-group
114+
::: code-group-item FOO
115+
```js
116+
const foo = 'foo'
117+
```
118+
:::
119+
::: code-group-item BAR
120+
```js
121+
const bar = 'bar'
122+
```
123+
:::
124+
::::

0 commit comments

Comments
 (0)