Bloques de código

Actualizado el 12 nov 2026

Los bloques de código delimitados se resaltan con Shiki usando los temas catppuccin. Cada bloque de código incluye un botón que alterna entre desplazamiento horizontal y líneas ajustadas. Un bloque sin lenguaje, o con uno que Shiki no conoce, se renderiza como texto plano con el mismo estilo.

Títulos

Añade un nombre de archivo o un título a los bloques de código:

```typescript title="livemark.config.ts"
import { defineConfig } from "livemark"
```

Se renderiza así:

import { defineConfig } from "livemark"

export default defineConfig({
  include: "docs/*.md",
})

Resaltado de líneas

Resalta líneas concretas con la sintaxis {line,range} en la cadena meta o con comentarios // [!code highlight] dentro del bloque de código.

Con la sintaxis meta:

```typescript {2,4-6}
const a = 1
const b = 2
```

Se renderiza así:

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

Con la sintaxis de comentario (// [!code highlight]):

```typescript
const greeting = "hello"
const target = "world"
```

Se renderiza así:

const greeting = "hello"
const target = "world"

Las anotaciones en comentarios se eliminan de la salida renderizada. También se admite la sintaxis de comentario de bloque /* [!code highlight] */.

Resaltado de palabras

Resalta todas las apariciones de una palabra con la sintaxis /TERM/:

```typescript /config/
const config = loadConfig()
export default config
```

Se renderiza así:

const config = loadConfig()
export default config

Números de línea

Muestra números de línea junto al código con lineNumbers:

```typescript lineNumbers
const a = 1
const b = 2
```

Se renderiza así:

const a = 1
const b = 2
const c = 3

Empieza a numerar desde una línea concreta con lineNumbers=N:

```typescript lineNumbers=5
const a = 1
const b = 2
```

Se renderiza así:

const a = 1
const b = 2
const c = 3

Líneas de diff

Marca líneas como añadidas o eliminadas con // [!code ++] y // [!code --]:

```typescript
const old = "removed"
const next = "added"
```

Se renderiza así:

const old = "removed"
const next = "added"

Líneas enfocadas

Atenúa todas las líneas excepto las enfocadas con // [!code focus]:

```typescript
const a = 1
const b = 2
const c = 3
```

Se renderiza así:

const a = 1
const b = 2
const c = 3

Errores y advertencias

Marca líneas como errores o advertencias con // [!code error] y // [!code warning]:

```typescript
const valid = "ok"
const invalid = null!
const risky = getValue() 
```

Se renderiza así:

const valid = "ok"
const invalid = null!
const risky = getValue() 

Código plegable

Limita la altura visible de los bloques de código largos con maxLines=N. Un botón "Expand" muestra el código completo:

```typescript maxLines=3
const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6
```

Se renderiza así:

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

Iconos de lenguaje

Los bloques de código muestran automáticamente un icono del lenguaje en la barra de título cuando hay un título. Los lenguajes admitidos incluyen TypeScript, JavaScript, React, Python, Rust y shell.

const greeting = "hello"

greeting = "hello"

let greeting = "hello";

Soporte de TypeScript

Añade twoslash a un bloque de código TypeScript para activar la información de tipos en línea. Pasa el cursor sobre los identificadores resaltados para ver sus tipos:

```typescript twoslash
const greeting = "hello"
//    ^?
```

Se renderiza así:

const 
const greeting: "hello"greeting = "hello"

Usa // @errors: 2304 para mostrar errores esperados:

const const x: anyx = unknown_var
Cannot find name 'unknown_var'.

Comandos de npm

Escribe comandos de npm y obtén automáticamente pestañas para todos los gestores de paquetes:

```npm
npm install livemark
```

Se renderiza así:

npm install livemark