75 lines
1.3 KiB
Markdown
75 lines
1.3 KiB
Markdown
---
|
|
title: Code Sandbox
|
|
icon: lucide:codesandbox
|
|
createTime: 2025/10/08 03:42:13
|
|
permalink: /en/guide/code/code-sandbox/
|
|
---
|
|
|
|
The theme supports embedding [Code Sandbox](https://codesandbox.io) in Markdown files.
|
|
|
|
## Configuration
|
|
|
|
This feature is disabled by default. You can enable it in the configuration file.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
codesandbox: true, // [!code highlight]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
## Syntax
|
|
|
|
### Basic Syntax
|
|
|
|
Embed Code Sandbox in the page:
|
|
|
|
```md
|
|
@[codesandbox](id)
|
|
```
|
|
|
|
Use Code Sandbox redirect button:
|
|
|
|
```md
|
|
@[codesandbox button](workspace/id)
|
|
```
|
|
|
|
### Extended Options
|
|
|
|
```md
|
|
@[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:
|
|
|
|
```md
|
|
@[codesandbox button](reaction/5wyzu)
|
|
```
|
|
|
|
Output:
|
|
|
|
@[codesandbox button](reaction/5wyzu)
|
|
|
|
Code Sandbox embedded in page:
|
|
|
|
```md
|
|
@[codesandbox](5wyzu)
|
|
```
|
|
|
|
Output:
|
|
|
|
@[codesandbox](5wyzu)
|