Preview
A component rendered as the page renders it, with its source beside it.
The example is the real component in the real theme — same tokens, same dark mode — so a reader sees what a block does rather than a description of it. This page, and every other page in this folder, is built out of it.
Usage
Rendered by the page you are reading.
::preview
:::callout{type="tip"}
Rendered by the page you are reading.
:::
#code
```mdc
::callout{type="tip"}
Rendered by the page you are reading.
::
```
::
API
No props.
Slots
| Slot | What goes in it |
|---|---|
default | The example, rendered |
code | The source, as a fence. Omit it and no tab strip appears |
Notes
The source in #code is written out rather than derived from the example above
it, and that is the block's one real cost. By the time the component runs, its
children are rendered nodes and the Markdown that produced them is gone;
re-serialising them would guess at a syntax they never came from.
Nothing checks that the source tab matches what is rendered beside it. Keep the example short enough that changing one without the other is obvious.