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

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeSandbox: true, 
    },
  }),
})

Mind the letter case

The embed syntax is all lowercase — @[codesandbox](id) — while the config field is camelCase — codeSandbox.

Writing codesandbox is silently dropped by the theme's field allowlist: the feature will not take effect and no error is reported.

Syntax

Basic Syntax

Embed Code Sandbox in the page:

@[codesandbox](id)

Use Code Sandbox redirect button:

@[codesandbox button](workspace/id)

Extended Options

@[codesandbox 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/13/26, 3:56 PM

View All Changelog

• e4dae-docs: improve docs (#1071)on 10/13/26
• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 0daf2-docs: improve docs (#929)on 7/15/26
• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageJs Fiddle

Next pageReplit