MarkDown容器
- Markdown 容器是对 Markdown 语法的一个扩展，使用简单的语法就可以在页面中呈现丰富的效果。
- 以下为本站博客拓展的MarkDown容器，可以实现更多丰富多彩的展示效果。
# 信息框容器
输入
::: tip
这是一条提示
:::
::: warning
这是一条注意
:::
::: danger
这是一条警告
:::
::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
输出
提示
这是一条提示
注意
这是一条注意
警告
这是一条警告
笔记
这是笔记容器，在 v1.5.0 + 版本才支持哦~
以上容器均可自定义标题，如：
::: tip 我的提示
自定义标题的提示框
:::
1
2
3
2
3
我的提示
自定义标题的提示框
# 布局容器 v1.3.3 +
# 居中标题
输入
::: center
我是居中的内容
（可用于标题、图片等的居中）
:::
1
2
3
4
2
3
4
输出
我是居中的内容 （可用于标题、图片等的居中）
# 右浮标题
::: right
[我是右浮动的内容](https://www.usouluo.top)
:::
1
2
3
4
2
3
4
输出
# 详情框
输入
::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::
1
2
3
4
5
6
2
3
4
5
6
输出
点击查看
这是一个详情块，在 IE / Edge 中不生效
js console.log('这是一个详情块')
# 定理框
::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
1
2
3
4
5
6
2
3
4
5
6
输出
注意
right、details、theorem这三个容器在v1.3.0 +版本才支持。center容器在v1.3.3 +版本才支持
# 普通卡片列表 v1.1.0 +
普通卡片列表容器，可用于友情链接、项目推荐、诗词展示等。
先来看看效果：
- name: 资源乐享吧
desc: 没有难找的资源，只有没有关注的你
avatar: https://cdn.jsdelivr.net/gh/china-fanxin/Picbed@main/blog/04.vuepress+vdoing特殊语法-资源乐享吧.png # 可选
link: https://www.usouluo.top/ # 可选
bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Vdoing's blog
desc: Vdoing主题作者博客
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
link: https://xugaoyi.github.io/vdoing-demo-blog/
bgColor: '#718971'
textColor: '#fff'
- name: 资源乐享吧
desc: 没有难找的资源，只有没有关注的你
avatar: https://cdn.jsdelivr.net/gh/china-fanxin/Picbed@main/blog/04.vuepress+vdoing特殊语法-资源乐享吧.png
link: https://www.usouluo.top/
bgColor: '#FCDBA0'
textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
上面效果在Markdown中的代码是这样的：
::: cardList
```yaml
- name: 资源乐享吧
desc: 没有难找的资源，只有没有关注的你
avatar: https://cdn.jsdelivr.net/gh/china-fanxin/Picbed@main/blog/04.vuepress+vdoing特殊语法-资源乐享吧.png # 可选
link: https://www.usouluo.top/ # 可选
bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Vdoing's blog
desc: Vdoing主题作者博客
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
link: https://xugaoyi.github.io/vdoing-demo-blog/
bgColor: '#718971'
textColor: '#fff'
- name: 资源乐享吧
desc: 没有难找的资源，只有没有关注的你
avatar: https://cdn.jsdelivr.net/gh/china-fanxin/Picbed@main/blog/04.vuepress+vdoing特殊语法-资源乐享吧.png
link: https://www.usouluo.top/
bgColor: '#FCDBA0'
textColor: '#A05F2C'
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 文章概要
博客内容概要部分，vuepress可以自动生成文章的概要，使用<!-- more -->语法进行分隔概要和正文部分，对语法有严格要求，在more两侧必须有且仅有一个空格才能正确显示文章概要。
- 在文章概要和文章之间输入
<!-- more -->
1
文章列表显示效果
# 高亮提示标记
Props:
- text- string
- type - string, 可选值： tip | warning | error，默认： tip
- vertical - string, 可选值： top | middle，默认： top
Usage:
你可以在标题或其他内容中使用标记：
#### 《沁园春·雪》 <Badge text="摘"/>
北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。
> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。
1
2
3
4
2
3
4
效果：
# 《沁园春·雪》 摘
北国风光注释，千里冰封，万里雪飘。
译文: 北方的风光。
# 代码块选项卡v1.8.0
yarn add vuepress-theme-vdoing -D
1
npm install vuepress-theme-vdoing -D
1
// Make sure to add code blocks to your code group
提示
请在<code-group>标签与markdown内容之间使用空行隔开，否则可能会解析不出来。
该组件只适用于放置代码块，放其他内容在体验上并不友好。
如您确实需要放置其他内容的选项卡，推荐使用vuepress-plugin-tabs (opens new window)插件。
编辑 (opens new window)
上次更新: 2021/06/16, 01:26:04