Das Beispiel ist die echte Komponente im echten Theme — dieselben Tokens,
derselbe Dunkelmodus —, sodass ein Leser sieht, was ein Block tut, statt eine
Beschreibung davon. Diese Seite, und jede andere Seite in diesem Ordner, ist
daraus gebaut.

## Verwendung

::preview
:::callout{type="tip"}
Gerendert von der Seite, die du gerade liest.
:::

#code
```mdc
::callout{type="tip"}
Gerendert von der Seite, die du gerade liest.
::
```
::

````mdc
::preview
:::callout{type="tip"}
Gerendert von der Seite, die du gerade liest.
:::

#code
```mdc
::callout{type="tip"}
Gerendert von der Seite, die du gerade liest.
::
```
::
````

## API

Keine Props.

### Slots

| Slot      | Was hineingehört                                       |
| :-------- | :----------------------------------------------------- |
| `default` | Das Beispiel, gerendert                                |
| `code`    | Der Quelltext, als Fence. Weggelassen erscheint keine Tab-Leiste |

## Anmerkungen

Der Quelltext in `#code` wird ausgeschrieben, statt aus dem Beispiel darüber
abgeleitet zu werden, und das ist der eine echte Preis dieses Blocks. Wenn die
Komponente läuft, sind ihre Kinder gerenderte Knoten und das Markdown, das sie
erzeugt hat, ist weg; sie neu zu serialisieren hieße, eine Syntax zu raten, aus
der sie nie kamen.

::callout{type="warning" title="Zwei Kopien driften auseinander"}
Nichts prüft, ob der Quelltext-Tab zu dem passt, was daneben gerendert wird.
Halte das Beispiel kurz genug, dass es auffällt, wenn eines ohne das andere
geändert wird.
::