The theme supports embedding Code Sandbox 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: {
      codesandbox: true, 
    },
  })
})

Syntax

Basic Syntax

Embed Code Sandbox in the page:

@[codesandbox](id)

Use Code Sandbox redirect button:

@[codesandbox button](workspace/id)

Extended Options

@[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console](id#filepath)

• id: Code Sandbox identifier
• title: Code Sandbox title
• layout: Code preview layout, options: Preview, Editor, Editor+Preview
• height: Code preview height
• navbar: Whether to display navigation bar, defaults to true
• console: Whether to display console, defaults to false
• filepath: File path

Examples

Code Sandbox redirect button:

@[codesandbox button](reaction/5wyzu)

Output:

Code Sandbox embedded in page:

@[codesandbox](5wyzu)

Output:

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageJs Fiddle

Next pageReplit