Pular para o conteúdo
duxt

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:

EscritoFaz
```ts {2,4-6}Realça essas linhas
```ts /useDuxtConfig/Realça essa palavra

API

Props

PropTipoNotas
codestringO código em bruto, para o botão de copiar
languagestringDo bloco
filenamestringDo […] do bloco
Esta página foi útil?