A lower-level container for preview and source slots.

CodePreview

code-preview is the lower-level building block behind demo.

Use it when the preview content and source blocks are authored directly in Markdown, instead of coming from registered demos and sources.

ContentRenderer registers code-preview by default, so Markdown can use :::code-preview directly.

Basic usage

:::code-preview

<span class="badge">New</span>

#source
```vue
<template>
  <span class="badge">New</span>
</template>
```
:::

New

<template>
  <span class="badge">New</span>
</template>

With code-group

:::code-preview

<div style="display:flex;gap:8px;">
  <span class="badge success">Success</span>
  <span class="badge error">Error</span>
</div>

#source
::::code-group

```vue [Vue]
<template>
  <span class="badge success">Success</span>
  <span class="badge error">Error</span>
</template>
```

```html [HTML]
<span class="badge success">Success</span>
<span class="badge error">Error</span>
```

::::
:::

SuccessError

Vue

<template>
  <span class="badge success">Success</span>
  <span class="badge error">Error</span>
</template>

HTML

<span class="badge success">Success</span>
<span class="badge error">Error</span>