El ejemplo es el componente real en el tema real — los mismos tokens, el mismo
modo oscuro — así que el lector ve lo que hace un bloque en vez de una
descripción de él. Esta página, y todas las demás de esta carpeta, están
construidas con él.

## Uso

::preview
:::callout{type="tip"}
Representado por la página que estás leyendo.
:::

#code
```mdc
::callout{type="tip"}
Representado por la página que estás leyendo.
::
```
::

````mdc
::preview
:::callout{type="tip"}
Representado por la página que estás leyendo.
:::

#code
```mdc
::callout{type="tip"}
Representado por la página que estás leyendo.
::
```
::
````

## API

Sin props.

### Slots

| Slot      | Qué va dentro                                                  |
| :-------- | :------------------------------------------------------------- |
| `default` | El ejemplo, representado                                        |
| `code`    | El código, como bloque cercado. Omítelo y no aparece la tira de pestañas |

## Notas

El código de `#code` se escribe a mano en vez de derivarse del ejemplo que hay
encima, y ese es el único coste real del bloque. Para cuando el componente se
ejecuta, sus hijos son nodos ya representados y el Markdown que los produjo ya
no está; volver a serializarlos sería adivinar una sintaxis de la que nunca
vinieron.

::callout{type="warning" title="Dos copias divergen"}
Nada comprueba que la pestaña del código coincida con lo que se representa a su
lado. Mantén el ejemplo lo bastante corto como para que cambiar uno sin el otro
salte a la vista.
::