Code Pen
About 170 wordsLess than 1 minute
2025-10-08
The theme supports embedding CodePen in Markdown files.
Configuration
This feature is disabled by default. You can enable it in the configuration file.
.vuepress/config.ts
export default defineUserConfig({
theme: plumeTheme({
markdown: {
codepen: true,
},
})
})Syntax
Basic syntax:
@[codepen](user/slash)Extended options support:
@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)preview: Whether to render in preview modeeditable: Whether the content is editabletab: Default active tabs, defaults toresult, multiple tabs separated by,theme: Theme, options:darkandlightheight: Container height, defaults to400pxwidth: Container width, defaults to100%user: CodePen usernameslash: CodePen pen slug/identifier
Examples
Input:
@[codepen](leimapapa/RwOZQOW)Output:
Preview Mode:
Input:
@[codepen preview](leimapapa/RwOZQOW)Output:
Editable Mode:
Input:
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)Output:
