Saltar al contenido
duxt

ProsePre

El bloque de código: nombre de archivo, icono de lenguaje, botón de copiar.

Todo bloque de código delimitado del sitio, y el componente que convierte un bloque mermaid en un diagrama.

Qué añade

La tarjeta alrededor del código — el nombre del archivo, un icono para su lenguaje y un botón de copiar — más números de línea opcionales.

Lenguajes

Se colorea todo lenguaje que Shiki trae consigo, y también todos los alias que conoce: ts y typescript, py y python, yml y console colorean igual. Nada que configurar — la capa los enumera todos, y una entrada langs propia se añade a esa lista en lugar de reemplazarla.

Un nombre que Shiki no conoce cae en texto plano. Avisa mientras desarrollas y calla en una compilación de producción, así que una errata como pyhton se publica como texto gris sin romper nada.

Cuatro alias son la excepción, por una razón que ninguna lista arregla: c++, c#, f# y 文言 no pueden ser una subruta de paquete, así que su gramática se alcanza por su propio nombre — escribe cpp, csharp, fsharp o wenyan.

Números de línea

Se activan por bloque, escribiéndolos en su meta:

```ts line-numbers
```

No están activos por defecto: la mayoría de los fragmentos de una documentación tienen cuatro líneas, y una columna de números al lado es ruido. Los números los dibuja un contador CSS, así que quien copia el bloque se lleva el código y no la numeración.

Anotaciones de Shiki

Dos funcionan en el propio bloque, más allá de las cuatro que trae Content:

EscritoHace
```ts {2,4-6}Resalta esas líneas
```ts /useDuxtConfig/Resalta esa palabra

API

Props

PropTipoNotas
codestringEl código fuente en bruto, para el botón de copiar
languagestringDel bloque
filenamestringDel […] del bloque
¿Le ha resultado útil esta página?