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:dark
andlight
height
: Container height, defaults to400px
width
: 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: