ProsePre
Le bloc de code : nom de fichier, icône de langage, bouton de copie.
Chaque bloc de code délimité du site, et le composant qui transforme un bloc mermaid en schéma.
Ce qu’il ajoute
La carte autour du code — le nom de fichier, une icône pour son langage et un bouton de copie — plus des numéros de ligne optionnels.
Langages
Chaque langage livré par Shiki est coloré, et chaque alias qu’il connaît avec
lui : ts et typescript, py et python, yml et console colorent de la
même façon. Rien à configurer — la couche les liste tous, et une entrée langs
propre s’ajoute à cette liste au lieu de la remplacer.
Un nom que Shiki ne connaît pas retombe en texte brut. Il avertit pendant le
développement et se taît dans un build de production : une coquille comme
pyhton part donc en texte gris sans rien faire échouer.
Quatre alias font exception, pour une raison qu’aucune liste ne corrige : c++,
c#, f# et 文言 ne peuvent pas être un sous-chemin de paquet, si bien que
leur grammaire s’atteint par son propre nom — écrivez cpp, csharp, fsharp
ou wenyan.
Numéros de ligne
À activer bloc par bloc, écrit dans son meta :
```ts line-numbers
```
Pas actifs par défaut : la plupart des extraits d’une documentation font quatre lignes, et une gouttière de numéros à côté n’est que du bruit. Les numéros sont dessinés par un compteur CSS, si bien qu’un lecteur qui copie le bloc obtient le code et non la numérotation.
Annotations Shiki
Deux fonctionnent sur le bloc lui-même, au-delà des quatre que livre Content :
| Écrit | Fait |
|---|---|
```ts {2,4-6} | Met en évidence ces lignes |
```ts /useDuxtConfig/ | Met en évidence ce mot |
API
Props
| Prop | Type | Remarques |
|---|---|---|
code | string | La source brute, pour le bouton de copie |
language | string | Issu du bloc |
filename | string | Issu du […] du bloc |