Code Sandbox
About 163 wordsLess than 1 minute
2025-10-08
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 identifiertitle
: Code Sandbox titlelayout
: Code preview layout, options:Preview
,Editor
,Editor+Preview
height
: Code preview heightnavbar
: Whether to display navigation bar, defaults to trueconsole
: Whether to display console, defaults to falsefilepath
: File path
Examples
Code Sandbox redirect button:
@[codesandbox button](reaction/5wyzu)
Output:
Code Sandbox embedded in page:
@[codesandbox](5wyzu)
Output: