vuepress-theme-plume/en/guide/code/code-sandbox/index.md

url

url
/en/guide/code/code-sandbox/index.md

The theme supports embedding Code Sandbox in Markdown files.

Configuration

This feature is disabled by default. You can enable it in the configuration file.

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codesandbox: true, // [!code highlight]
    },
  })
})

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:

@codesandbox button

Code Sandbox embedded in page:

@[codesandbox](5wyzu)

Output:

@codesandbox