主题支持在 Markdown 文件中嵌入 Code Sandbox。

配置

此功能默认不启用，你可以在配置文件中启用它。

.vuepress/config.ts

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

语法

简单语法

将 Code Sandbox 嵌入到页面中

@[codesandbox](id)

使用 Code Sandbox 跳转按钮

@[codesandbox button](workspace/id)

更多选项

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

• id: Code Sandbox ID
• title: Code Sandbox 标题
• layout: 代码预览布局 可选值： Preview， Editor， Editor+Preview
• height: 代码预览高度
• navbar: 是否显示导航栏，默认为 true
• console: 是否显示控制台，默认为 false
• filepath: 文件路径

示例

codeSandbox 跳转按钮：

@[codesandbox button](reaction/5wyzu)

输出：

codeSandbox 内嵌到页面中：

@[codesandbox](5wyzu)

输出：

贡献者

pengzhanbo

更新日志

2025/10/7 15:13

查看所有更新日志

• 4d236-feat(theme)!: add collections support (#704)于 2025/10/7
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• b600e-docs: update docs于 2024/4/28
• 4349a-docs: update doc于 2024/4/4