Bloques de código

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: < para < y & para &. Las pestañas de bloques de código se explican en Pestañas de código.

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

```
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). 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.

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

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

Se renderiza como:

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.

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

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

Se renderiza como:

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.

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

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

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.

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

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

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.

10const a = 1
11const 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, <ins> y <del> colorean la salida de verde y rojo.

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

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

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.

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.

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>:

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

:::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.

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

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

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 : los 16 colores, las formas de 256 colores y de color verdadero, negrita, tenue, cursiva, subrayado y tachado. Los demás escapes se descartan.

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

<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:

✓ 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.

fn main() {}

htmlpress build docs

Soporte de TypeScript

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.

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

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

Se renderiza como:

npm install --save-dev gethtmlpress

pnpm add -D gethtmlpress

yarn add -D gethtmlpress

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.

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

<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