1.1.4 • Published 7 months ago
vitepress-plugin-sandpack v1.1.4
install
This is plugin for vitepress that give you the power of editable sandboxes that run in the browser.
Language support: angular
| react
| react-ts
| vanilla
| vanilla-ts
| vue
| vue3
| vue3-ts
| svelte
| solid
| test-ts
.
install package
cd project-folder npm i vitepress-plugin-sandpack -D
TIPS: for
pnpm
you need:
pnpm add markdown-it-container -D
edit theme config, register global component
docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'; +import { Sandbox } from 'vitepress-plugin-sandpack'; +import 'vitepress-plugin-sandpack/dist/style.css'; export default { ...DefaultTheme, enhanceApp(ctx) { DefaultTheme.enhanceApp(ctx); + ctx.app.component('Sandbox', Sandbox); }, }
edit config
docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'; import container from 'markdown-it-container'; import { renderSandbox } from 'vitepress-plugin-sandpack'; // rule of 'html tag name' to 'component name' // 'sanbox' -> 'Sandbox' // 'my-sandbox' -> MySandbox // 'sandbox-react-demo' -> SandboxReactDemo export default defineConfig({ // ... markdown: { config(md) { md // the second parameter is html tag name .use(container, 'sandbox', { render (tokens, idx) { return renderSandbox(tokens, idx, 'sandbox'); }, }); }, }, // ... })
document
how to use
code in markdown file
preview in browser
light mode
dark mode
use file snippets
1.1.4
7 months ago
1.1.3
7 months ago
1.1.1
8 months ago
1.0.2
9 months ago
1.1.0
8 months ago
1.0.1
9 months ago
1.0.0
9 months ago
1.1.2
7 months ago
1.0.3
9 months ago
0.3.2
9 months ago
0.3.1
9 months ago
0.3.0
12 months ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.1.0-beta.3
1 year ago
0.1.0-beta.2
1 year ago
0.1.0-beta.1
1 year ago
0.1.0-beta.0
1 year ago