Pré-visualização
Um componente desenhado tal como a página o desenha, com o seu código-fonte ao lado.
O exemplo é o componente real no tema real — os mesmos tokens, o mesmo modo escuro — por isso um leitor vê o que um bloco faz em vez de uma descrição dele. Esta página, e todas as outras páginas desta pasta, são feitas com ele.
Utilização
Desenhado pela página que estás a ler.
::preview
:::callout{type="tip"}
Desenhado pela página que estás a ler.
:::
#code
```mdc
::callout{type="tip"}
Desenhado pela página que estás a ler.
::
```
::
API
Sem props.
Slots
| Slot | O que leva dentro |
|---|---|
default | O exemplo, desenhado |
code | O código-fonte, como bloco de código. Omite-o e não aparece nenhuma faixa de separadores |
Notas
O código-fonte em #code é escrito à mão em vez de derivado do exemplo acima
dele, e esse é o único custo real do bloco. Quando o componente corre, os seus
filhos já são nós desenhados e o Markdown que os produziu desapareceu; voltar a
serializá-los seria adivinhar uma sintaxe de onde nunca vieram.
Nada verifica que o separador do código-fonte corresponde ao que é desenhado ao lado. Mantém o exemplo curto o suficiente para que mudar um sem o outro seja óbvio.