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, 
    },
  })
})

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 mode
editable: Whether the content is editable
tab: Default active tabs, defaults to result, multiple tabs separated by ,
theme: Theme, options: dark and light
height: Container height, defaults to 400px
width: Container width, defaults to 100%
user: CodePen username
slash: CodePen pen slug/identifier

Input:

@[codepen](leimapapa/RwOZQOW)

Output:

Preview Mode:

Input:

@[codepen preview](leimapapa/RwOZQOW)

Output:

Editable Mode:

Input:

@[codepen editable tab="html,result"](leimapapa/RwOZQOW)

Output:

9/9/26, 7:33 AM

View All Changelog