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

::preview
:::callout{type="tip"}
Rendered by the page you are reading.
:::

#code
```mdc
::callout{type="tip"}
Rendered by the page you are reading.
::
```
::

````mdc
::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.

::callout{type="warning" title="Two copies drift"}
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.
::