插件
提示
社区插件文档 (opens new window) 官方插件文档 (opens new window)
更多插件：在npm (opens new window)搜索vuepress-plugin
# 富文本体验
安装 npm install -D vuepress-plugin-container
富文本配置
config.ts 配置
module.exports = {
plugins: [
[
"vuepress-plugin-container",
{
type: "upgrade",
before: (info) => `<UpgradePath title="${info}">`,
after: "</UpgradePath>",
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
styles/index.styl css 配置
pre.vue-container
border-left-width: .5rem;
border-left-style: solid;
border-color: #42b983;
border-radius: 0px;
& > code
font-size: 14px !important;
& > p
margin: -5px 0 -20px 0;
code
background-color: #42b983 !important;
padding: 3px 5px;
border-radius: 3px;
color #000
em
color #808080
font-weight light
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
目录结构使用了富文本，点击查看 效果
# 图片缩放效果
安装 npm install -D vuepress-plugin-medium-zoom
config.ts 配置
module.exports = {
plugins: [
[
"vuepress-plugin-zooming", // 放大图片
{
selector: ".theme-vdoing-content img:not(.no-zoom)", // 排除class是no-zoom的图片
options: {
bgColor: "rgba(0,0,0,0.6)",
},
},
],
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
输入：
<img src="/-git.png" alt="演示" width="100" style="cursor: zoom-in;" />
1
输出（点击下方图片）：
上次更新: 2023/07/03, 09:49:50