Aller au contenu
duxt

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 :

ÉcritFait
```ts {2,4-6}Met en évidence ces lignes
```ts /useDuxtConfig/Met en évidence ce mot

API

Props

PropTypeRemarques
codestringLa source brute, pour le bouton de copie
languagestringIssu du bloc
filenamestringIssu du […] du bloc
Cette page vous a-t-elle été utile ?