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+Previewheight: 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:
