# Sintaxis avanzada

> Cualquier elemento HTML, los estilos y scripts propios de una página, matemáticas, diagramas Mermaid y componentes del proyecto.

## Bloques HTML

Una página es HTML, así que todos los elementos funcionan directamente. Algunos ejemplos habituales son `<kbd>` para atajos de teclado, `<sup>`/`<sub>` para superíndices y subíndices, y `<details>`/`<summary>` para acordeones.

```
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy. Water is H<sub>2</sub>O.
```

Se renderiza como: Pulsa `Ctrl` + `C` para copiar. El agua es H2O.

Prefiere los elementos semánticos a las clases y al `style` en línea: el tema da estilo a los propios elementos, y eso es lo que hace que todas las páginas parezcan del mismo sitio. Para cambiar el aspecto en todo el sitio, sobrescribe un [token del tema](/es/authoring/rich-elements/).

## Renderizado de MDX

No hay lenguaje de plantillas: lo que una página necesita más allá del HTML viene de su propio `<head>`. Los `<link>`, `<style>` y `<script>` de una página se conservan y se añaden al head del layout, después del tema:

**HTML**

```html
<title>Version</title>
<script type="module">
  document.querySelector("#version").textContent = "2.0.0"
</script>

<h1>Version</h1>
<p>The current version is <strong id="version"></strong>.</p>
```

**Markdown**

```md
---
title: Version
---

<script type="module">
  document.querySelector("#version").textContent = "2.0.0"
</script>

# Version

The current version is <strong id="version"></strong>.
```

Es una vía de escape para casos de uso avanzados. Para marcado compartido entre páginas, usa un [componente del proyecto](#documentos-incluidos).

## Expresiones LaTeX

El LaTeX entre signos de dólar se renderiza a MathML al compilar, que los navegadores dibujan de forma nativa, sin script ni fuente web. Un dólar simple es en línea, y un dólar doble, un bloque centrado:

**HTML**

```html
<p>Inline: $E = mc^2$, with $x$, $\alpha$ or $\sum_{i=1}^{n} i$.</p>
<p>$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$</p>
```

**Markdown**

```md
Inline: $E = mc^2$, with $x$, $\alpha$ or $\sum_{i=1}^{n} i$.

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```

Se renderiza como:

En línea: $E = mc^2$, con $x$, $\alpha$ o $\sum_{i=1}^{n} i$.

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$

Matrices y ecuaciones alineadas:

$$
\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}
$$

Un signo de dólar solo es matemáticas alrededor de algo que lo parece: el de apertura va seguido de un carácter que no es un espacio, y el de cierre sigue a un carácter que no es un espacio y no va seguido de un dígito. Así, los precios, como en "cuesta \$5 y \$10", se quedan como texto, y `\$` es siempre un signo de dólar normal. Un par `$$` debe estar dentro de un mismo elemento. El código, los enlaces y los elementos `data-literal` no se tocan.

`<htmlpress-math>` escribe lo mismo sin dólares; `display` lo convierte en un bloque:

**HTML**

```html
<htmlpress-math display>a^2 + b^2 = c^2</htmlpress-math>
```

**Markdown**

```md
$$
a^2 + b^2 = c^2
$$
```

$$
a^2 + b^2 = c^2
$$

Un LaTeX no válido hace fallar la compilación con el mensaje del analizador. La copia en Markdown de la página conserva el código fuente `$…$`. Una página puede seguir escribiendo MathML a mano.

## Diagramas Mermaid

Un bloque `<pre><code class="language-mermaid">` contiene código fuente de [Mermaid](https://mermaid.js.org), dibujado en el tema actual y redibujado cuando cambia el tema. Escapa `<` y `&` en el código fuente. La biblioteca se carga desde jsDelivr solo en las páginas que tienen un diagrama; sin conexión, se muestra el código fuente en su lugar.

**HTML**

```html
<pre><code class="language-mermaid">flowchart LR
  pages[HTML pages] --&gt; build[htmlpress build] --&gt; site[Static site]</code></pre>
```

**Markdown**

````md
```mermaid
flowchart LR
  pages[HTML pages] --> build[htmlpress build] --> site[Static site]
```
````

Se renderiza como:

```mermaid
flowchart LR
  pages[HTML pages] --> build[htmlpress build] --> site[Static site]
```

**HTML**

```html
<pre><code class="language-mermaid">pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10</code></pre>
```

**Markdown**

````md
```mermaid
pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10
```
````

Se renderiza como:

```mermaid
pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10
```

## Documentos incluidos

Un componente del proyecto comparte marcado entre páginas. Un archivo en `.htmlpress/components/<name>/<name>.html` rellena cada `<htmlpress-<name>>` de cada página al compilar:

- .htmlpress

  - components

    - disclaimer

      - disclaimer.html
      - disclaimer.css

- guide.html

**HTML**

```html
<!-- .htmlpress/components/disclaimer/disclaimer.html -->
<aside><p>Provided as-is, without warranty.</p></aside>

<!-- guide.html -->
<htmlpress-disclaimer></htmlpress-disclaimer>
```

**Markdown**

```md
<!-- .htmlpress/components/disclaimer/disclaimer.html -->
<aside><p>Provided as-is, without warranty.</p></aside>

<!-- guide.md -->
::disclaimer
```

- Su `.css` y su `.js` se cargan solo en las páginas donde aparece la etiqueta; la etiqueta se mantiene alrededor del marcado insertado, así que su CSS se limita a la etiqueta, `@scope (htmlpress-disclaimer)`.
- La carpeta es la etiqueta sin su prefijo `htmlpress-`, igual que la de un componente integrado: una carpeta con el nombre de un componente integrado, como `tabs`, lo sustituye.

Consulta [Sobrescritura/Escape](/es/customization/overriding-escaping/) para ver todos los archivos bajo `.htmlpress/`.

`<htmlpress-include src="…">` inserta otro archivo por su ruta, relativa a la página (o al proyecto con una `/` inicial): el cuerpo de un archivo `.html`, un archivo `.md` renderizado (sin su frontmatter), o cualquier otro archivo como un bloque de código titulado con su nombre y resaltado según su extensión.

**HTML**

```html
<htmlpress-include src="../includes/disclaimer.md"></htmlpress-include>
```

**Markdown**

```md
::include{file="../includes/disclaimer.md"}
```

Se renderiza como:

> **Disclaimer.** Htmlpress is provided as-is, without warranty. This note lives in `rust/docs/includes/disclaimer.md` and is included, not copied, into this page.

Un archivo de código acepta los atributos de los bloques de código, como `data-lines`, `data-line-numbers` o `data-title`, que sustituye al nombre del archivo:

**HTML**

```html
<htmlpress-include src="../includes/build.ts" data-lines="3"></htmlpress-include>
```

**Markdown**

```html
<htmlpress-include src="../includes/build.ts" data-lines="3"></htmlpress-include>
```

Se renderiza como:

**build.ts**

```typescript
import { build } from "htmlpress"

const report = await build("docs")
console.log(`built ${report.pages} pages`)
```

- Las inclusiones se anidan hasta cinco niveles, y una página expande como máximo 1000 de ellas o 16 MB. Un archivo que no existe, un ciclo, o una ruta que sale del proyecto o nombra un archivo que empieza por punto, `node_modules` o `.htmlpress`, hace fallar la compilación: un archivo incluido se publica.
- Deja los parciales fuera del sitio con `exclude`, como hace este sitio con `exclude: rust/docs/includes/**`; de lo contrario, un parcial `.html` sería también una página.
- El enlace "Editar esta página" y la fecha de actualización siguen siendo los de la página; editar un archivo incluido recompila la página con `htmlpress start`.