ProsePre
O bloco de código: nome do ficheiro, ícone da linguagem, botão de copiar.
Todos os blocos de código delimitados do site, e o componente que transforma um bloco mermaid num diagrama.
O que acrescenta
O cartão à volta do código — o nome do ficheiro, um ícone para a sua linguagem e um botão de copiar — mais números de linha opcionais.
Linguagens
Todas as linguagens que o Shiki traz são coloridas, e também todos os alias que
conhece: ts e typescript, py e python, yml e console colorem da
mesma maneira. Nada para configurar — a camada lista-as todas, e uma entrada
langs própria acrescenta-se a essa lista em vez de a substituir.
Um nome que o Shiki não conhece cai em texto simples. Avisa enquanto
desenvolves e cala-se numa build de produção, por isso uma gralha como
pyhton sai como texto cinzento sem falhar nada.
Quatro alias são a exceção, por uma razão que nenhuma lista resolve: c++,
c#, f# e 文言 não podem ser um subcaminho de pacote, pelo que a gramática
por trás deles alcança-se pelo seu próprio nome — escreve cpp, csharp,
fsharp ou wenyan.
Números de linha
Ativados bloco a bloco, escritos no seu meta:
```ts line-numbers
```
Não estão ligados por omissão: a maioria dos excertos da documentação tem quatro linhas, e uma goteira de números ao lado deles é ruído. Os números são desenhados por um contador CSS, por isso um leitor que copie o bloco leva o código e não a numeração.
Anotações do Shiki
Duas funcionam no próprio bloco, para além das quatro que o Content traz:
| Escrito | Faz |
|---|---|
```ts {2,4-6} | Realça essas linhas |
```ts /useDuxtConfig/ | Realça essa palavra |
API
Props
| Prop | Tipo | Notas |
|---|---|---|
code | string | O código em bruto, para o botão de copiar |
language | string | Do bloco |
filename | string | Do […] do bloco |