# Bloques de código

> Bloques de código con botones de copiar, pestañas de gestores de paquetes y ventanas de terminal.

Un bloque de código es un `<pre><code>`, con el estilo del tema en su fuente monoespaciada. Cada bloque de código recibe un botón de copiar y otro que ajusta las líneas largas. Escapa el código que contiene: `&lt;` para `<` y `&amp;` para `&`. Las pestañas de bloques de código se explican en [Pestañas de código](/es/authoring/rich-elements/).

**HTML**

```html
<pre><code>const greeting = "&lt;hello&gt;"</code></pre>
```

**Markdown**

````md
```
const greeting = "<hello>"
```
````

Se renderiza como:

```
const greeting = "<hello>"
```

## Resaltado de sintaxis

Una clase `language-*` en el `<code>` colorea el bloque al compilar con las gramáticas TextMate de VS Code, el mismo resultado que Shiki, en un tema claro y otro oscuro que siguen al del lector (consulta [Temas de sintaxis](/es/customization/syntax-themes/)). Hay más de 220 lenguajes integrados, con sus alias habituales (`ts`, `sh`, `yml`); uno desconocido, o un bloque que contiene marcado propio, queda sin colorear.

**HTML**

```html
<pre><code class="language-rust">fn main() {
    println!("hello");
}</code></pre>
```

**Markdown**

````md
```rust
fn main() {
    println!("hello");
}
```
````

Se renderiza como:

```rust
fn main() {
    println!("hello");
}
```

## Títulos

`data-title` en el `<pre>` le da al bloque una barra de título, normalmente el nombre del archivo; funciona tanto si el bloque está resaltado como si no.

**HTML**

```html
<pre data-title="htmlpress.yaml"><code class="language-yaml">title: Htmlpress</code></pre>
```

**Markdown**

````md
```yaml title="htmlpress.yaml"
title: Htmlpress
```
````

Se renderiza como:

**htmlpress.yaml**

```yaml
title: Htmlpress
```

## Resaltado de líneas

`data-lines` en un bloque resaltado marca líneas, contadas desde 1: líneas sueltas y rangos, separados por comas.

**HTML**

```html
<pre><code class="language-js" data-lines="2">…</code></pre>
```

**Markdown**

````md
```js lines="2"
…
```
````

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

## Resaltado de palabras

`data-words` en un bloque resaltado marca cada aparición de cada palabra de la lista separada por comas. Una palabra que la gramática divide en dos tokens no se marca.

**HTML**

```html
<pre><code class="language-js" data-words="greeting">…</code></pre>
```

**Markdown**

````md
```js words="greeting"
…
```
````

```js
const greeting = "hello"
console.log(greeting)
```

## Números de línea

`data-line-numbers` en un bloque resaltado numera sus líneas; `data-line-numbers="10"` empieza desde 10. El botón de copiar deja fuera los números.

```js
const a = 1
const b = 2
```

## Líneas de diff

`data-add` y `data-remove` en un bloque resaltado marcan líneas como añadidas o eliminadas, con un `+` o un `−` que el botón de copiar deja fuera. Dentro de un [terminal](#terminal), `<ins>` y `<del>` colorean la salida de verde y rojo.

**HTML**

```html
<pre><code class="language-js" data-remove="1" data-add="2">…</code></pre>
```

**Markdown**

````md
```js remove="1" add="2"
…
```
````

```js
const port = 8080
const port = 8000
serve(port)
```

## Líneas enfocadas

`data-focus` en un bloque resaltado atenúa todas las demás líneas, hasta que el lector apunta al bloque.

```js
import { build } from "htmlpress"
await build("docs")
console.log("done")
```

## Errores y advertencias

`data-error` y `data-warning` marcan líneas en rojo y amarillo.

```js
undefinedCall()
const unused = 1
```

Cada marca de línea acepta la misma lista que `data-lines`, como `2,4-5`, y una lista no válida hace fallar la compilación.

## Código plegable

Un `<details>` alrededor de un bloque largo lo oculta tras su `<summary>`:

**HTML**

```html
<details>
  <summary>The full config</summary>
  <pre><code>…</code></pre>
</details>
```

**Markdown**

````md
:::details[The full config]
```
…
```
:::
````

`data-collapse` en el `<pre>` muestra solo sus primeras líneas, con una barra Expandir bajo el bloque para el resto; sin el script, el bloque se desplaza en su lugar. Un bloque que no supera esa altura no recibe barra.

**HTML**

```html
<pre data-collapse="5"><code class="language-yaml">…</code></pre>
```

**Markdown**

````md
```yaml collapse="5"
…
```
````

```yaml
steps:
  build: 1
  build: 2
  build: 3
  build: 4
  build: 5
  build: 6
  build: 7
  build: 8
  build: 9
  build: 10
  build: 11
  build: 12
```

## Salida ANSI

Un bloque en `language-ansi` renderiza los escapes de color de la salida de una terminal, escritos tal cual o como `&#27;`: los 16 colores, las formas de 256 colores y de color verdadero, negrita, tenue, cursiva, subrayado y tachado. Los demás escapes se descartan.

**HTML**

```html
<pre><code class="language-ansi">&#27;[32m✓&#27;[0m built 48 pages
&#27;[1;31merror&#27;[0m: index.html: no title</code></pre>
```

**Markdown**

```html
<pre><code class="language-ansi">&#27;[32m✓&#27;[0m built 48 pages
&#27;[1;31merror&#27;[0m: index.html: no title</code></pre>
```

Se renderiza como:

```ansi
✓ built 48 pages
error: index.html: no title
```

## Iconos de lenguaje

Un bloque con título muestra el logo de su lenguaje en la barra de título: TypeScript, JavaScript, React (`jsx`, `tsx`), Python, Rust y shell, el conjunto que muestra Livemark, o un icono de archivo genérico para cualquier otro lenguaje.

**main.rs**

```rust
fn main() {}
```

**build.sh**

```sh
htmlpress build docs
```

## Soporte de TypeScript

> **No previsto**
>
> La información de tipos al pasar el ratón, como la que ofrece Twoslash, necesita el compilador de TypeScript, que un único binario de Rust no incluye. Un bloque de TypeScript se resalta como cualquier otro.

## Comandos de npm

Escribe un comando `npm` o `npx` dentro de `<htmlpress-package-tabs>` y la compilación lo convierte en pestañas para npm, pnpm, yarn y bun, sincronizadas en todo el sitio. Las demás líneas se quedan tal como están escritas.

**HTML**

```html
<htmlpress-package-tabs>
  <pre><code>npm install --save-dev gethtmlpress</code></pre>
</htmlpress-package-tabs>
```

**Markdown**

````md
```npm
npm install --save-dev gethtmlpress
```
````

Se renderiza como:

**npm**

```
npm install --save-dev gethtmlpress
```

**pnpm**

```
pnpm add -D gethtmlpress
```

**yarn**

```
yarn add -D gethtmlpress
```

**bun**

```
bun add -D gethtmlpress
```

## Terminal

Un `<pre>` dentro de `<htmlpress-terminal>` parece una ventana de terminal, oscura en ambos temas y con el nombre que indica `title`. Dentro, `<kbd>` es un comando tecleado (se añade el prompt), `<samp>` salida simple, y `<ins>`, `<del>` y `<mark>` salida verde, roja y amarilla.

**HTML**

```html
<htmlpress-terminal title="zsh">
  <pre><kbd>htmlpress build docs</kbd>
<samp>built 7 pages…</samp>
<ins>✓ ready</ins></pre>
</htmlpress-terminal>
```

**Markdown**

```html
<htmlpress-terminal title="zsh">
  <pre><kbd>htmlpress build docs</kbd>
<samp>built 7 pages…</samp>
<ins>✓ ready</ins></pre>
</htmlpress-terminal>
```

Se renderiza como:

```
$ htmlpress build docs
built 7 pages and 0 files into docs/.htmlpress/build
✓ ready
✗ 1 page failed
! 1 warning
```