Code Pen
约 222 字小于 1 分钟
2024-04-04
主题支持在 Markdown 文件中嵌入 CodePen。
配置
此功能默认不启用,你可以在配置文件中启用它。
.vuepress/config.ts
export default defineUserConfig({
theme: plumeTheme({
markdown: {
codepen: true,
},
})
})语法
简单语法:
@[codepen](user/slash)更多选项支持:
@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)preview: 是否渲染为预览模式editable: 是否可编辑tab: 默认显示的标签, 默认为result,多个使用,分隔theme: 主题, 可选值dark和lightheight: 容器高度, 默认为400pxwidth: 容器宽度, 默认为100%user: CodePen 用户名slash: CodePen 代码文件名
示例
输入:
@[codepen](leimapapa/RwOZQOW)输出:
预览模式:
输入:
@[codepen preview](leimapapa/RwOZQOW)输出:
编辑模式:
输入:
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)输出:
