在 VuePress 搭建的博客页面中，可以使用下面特殊的 Markdown 语法来显示特殊的样式与功能
# 目录
生成当前文章的目录
# 图片
插入图片并设置图片的大小为 100 x 100
设置图片大小需要插件支持
vuepress-plugin-image
1
# 表格
插入表格
| 标题一 | 标题二 |
|:---:|:---:|
| 表格数据 | 表格数据 |
| 表格数据 | 非常长非常长非常长非常长非常长的表格数据 |
| 表格数据 |  |
1
2
3
4
5
2
3
4
5
| 标题一 | 标题二 |
|---|---|
| 表格数据 | 表格数据 |
| 表格数据 | 非常长非常长非常长非常长非常长的表格数据 |
| 表格数据 | |
# 代码
``` js
export default {
name: 'MyComponent',
// ...
}
``` <!-- js 代码 -->
1
2
3
4
5
6
2
3
4
5
6
export default {
name: 'MyComponent',
// ...
}
1
2
3
4
2
3
4
# 容器
插入不同样式的容器，容器可以嵌套使用
需要插件支持 vuepress-plugin-container
# 提示
::: tip 提示
这是一条提示文本
::: <!-- 提示容器 -->
1
2
3
2
3
提示
这是一条提示文本
# 警告
::: warning 警告
这是一条警告文本
::: <!-- 警告容器 -->
1
2
3
2
3
警告
这是一条警告文本
# 危险
::: danger 危险
这是一条危险文本
::: <!-- 危险容器 -->
1
2
3
2
3
危险
这是一条危险文本
# 居中自定义容器beta
::: center
::: <!-- 居中容器 -->
1
2
3
2
3
module.exports = {
plugins: [
[
'vuepress-plugin-container',
{
type: 'center',
before: info => `<div class="customer-container-center">`,
after: '</div>',
},
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 居右自定义容器beta
::: right
::: <!-- 居右容器 -->
1
2
3
2
3
module.exports = {
plugins: [
[
'vuepress-plugin-container',
{
type: 'right',
defaultTitle: '',
},
]
]
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 自定义区块自定义容器beta
::: 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
2
3
4
5
module.exports = {
plugins: [
[
'vuepress-plugin-container',
{
type: 'theorem',
before: info => `<div class="customer-container-theorem"><p class="title">${info}</p>`,
after: '</div>',
},
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 选择区块
定义一个具有 tab 标签的区块
需要插件支持 vuepress-plugin-tabs
:::: tabs cache-lifetime="10" :options="{ useUrlFragment: false }"
::: tab "标签一" id="first-tab"
这里是第一个标签中的内容
::: <!-- 第一个标签 -->
::: tab "标签二" id="second-tab"
这里是第二个标签中的内容
::: <!-- 第二个标签 -->
::::
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 代码示例
通过下面的方式可以添加一个 HTML5 的代码示例
此功能需要 vuepress-plugin-demo-block 插件支持
::: demo [vanilla]
此处添加 H5 代码
:::
1
2
3
2
3
效果
<html>
<h>这里是 H5 代码示例</h>
</html>
1
2
3
2
3
# 流程图
插入流程图
@flowstart
cond=>condition: Process?
process=>operation: Process
e=>end: End
cond(yes)->process->e
cond(no)->e
@flowend
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
@flowstart
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
@flowend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 公式
插入数学公式
需要插件支持 vuepress-plugin-mathjax
$\displaystyle \lim^{x \to \infty}_{y \to 0}{\frac{x}{y}}$
1
$$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}$$
1
2
2
# UML
插入 UML 图
需要插件支持 markdown-it-plantuml
@startuml
Bob -> Alice : hello
@enduml
1
2
3
2
3