mintlify__docs/es/create/text.mdx

---
title: "Dar formato al texto"
description: "Formatea texto en tu documentación con encabezados Markdown, negrita, cursiva, enlaces, citas y otras opciones de estilo en línea en páginas MDX."
keywords: ["Markdown formatting", "text styling", "headers", "anchor links", "custom heading IDs"]
---

<div id="headers">
  ## Encabezados
</div>

Los encabezados organizan tu contenido y crean anclajes de navegación. Aparecen en la tabla de contenidos y ayudan a los usuarios a explorar tu documentación.

<div id="creating-headers">
  ### Creación de encabezados
</div>

Usa los símbolos `#` para crear encabezados de distintos niveles:

```mdx
## Encabezado de sección principal
### Encabezado de subsección
#### Encabezado de sub-subsección
```

Usa `##` (H2) hasta `######` (H6) para las secciones de contenido. H1 está reservado para el título de la página establecido en tu [frontmatter](/es/organize/pages), así que no agregues un encabezado `#` de nivel superior dentro del cuerpo de la página.

<Tip>
  Utiliza encabezados descriptivos, con palabras clave, que indiquen claramente el contenido que sigue. Esto mejora la navegación del usuario y el posicionamiento en buscadores.
</Tip>

<div id="automatic-anchor-ids">
  ### IDs de anclaje automáticos
</div>

De forma predeterminada, Mintlify genera un ID de anclaje a partir del texto del encabezado. Los IDs generados siguen estas reglas:

- Mintlify convierte las letras a minúsculas y los espacios en blanco a guiones.
- Mintlify convierte las apóstrofes rectas en comillas simples de cierre (`’`) y las mantiene en el ID.
- Mintlify convierte los puntos en guiones y elimina los paréntesis.
- Mintlify convierte las letras mayúsculas dentro de una palabra a minúsculas sin añadir guiones.
- Mintlify conserva las barras diagonales y los ampersands.

Cuando una página tiene varios encabezados que generan el mismo ID, Mintlify añade `-2`, `-3`, y así sucesivamente. El contador se aplica a toda la página, incluidos los encabezados anidados dentro de componentes como pestañas.

Los siguientes ejemplos muestran cómo el texto del encabezado se convierte en un ID de anclaje generado:

| Texto del encabezado | ID generado |
| :--- | :--- |
| `Getting started` | `getting-started` |
| `Config.json options` | `config-json-options` |
| `What's new` | `what’s-new` |
| `Rate limits (per minute)` | `rate-limits-per-minute` |
| `Read/write access` | `read/write-access` |
| `Fees & billing` | `fees-&-billing` |
| `OAuth` | `oauth` |
| Encabezado `Overview` duplicado | `overview-2` |

<Note>
  Los IDs de anclaje de Mintlify no usan el estilo de slug de GitHub. Codifica en porcentaje los caracteres no ASCII cuando construyas una URL de forma programática.
</Note>

<div id="custom-heading-ids">
  ### IDs de encabezado personalizados
</div>

Para sobrescribir el ID generado con uno personalizado, usa la sintaxis `{#custom-id}`.

```mdx
## My section {#my-custom-anchor}
### Configuration options {#config}
##### Deep detail {#detail}
```

El ID personalizado reemplaza al anclaje generado automáticamente, por lo que puedes enlazar al encabezado con `#my-custom-anchor` o `#config` en lugar del texto slugificado por defecto.

Esto es útil cuando deseas enlaces de anclaje estables que no cambien al actualizar el texto del encabezado, o cuando necesitas anclajes más cortos y fáciles de recordar.

<div id="disabling-anchor-links">
  ### Desactivar enlaces de anclaje
</div>

De forma predeterminada, los encabezados incluyen enlaces de anclaje en los que se puede hacer clic que permiten a los usuarios enlazar directamente a secciones específicas. Puedes desactivar estos enlaces de anclaje usando la prop `noAnchor` en encabezados HTML o React.

<CodeGroup>

```mdx HTML header example
<h2 noAnchor>
Encabezado sin enlace de anclaje
</h2>
```

```mdx React header example
<Heading level={2} noAnchor>
Encabezado sin enlace de anclaje
</Heading>
```

</CodeGroup>

Cuando se usa `noAnchor`, el encabezado no muestra la “píldora” de anclaje y, al hacer clic en el texto del encabezado, no se copia el enlace de anclaje al portapapeles.

<div id="text-formatting">
  ## Formato de texto
</div>

Compatible con la mayoría del formato de Markdown para resaltar y dar estilo al texto.

<div id="basic-formatting">
  ### Formato básico
</div>

Aplica estos estilos de formato a tu texto:

| Estilo | Sintaxis | Ejemplo | Resultado |
|-------|--------|---------|--------|
| **Negrita** | `**text**` | `**nota importante**` | **nota importante** |
| *Cursiva* | `_text_` | `_énfasis_` | *énfasis* |
| ~~Tachado~~ | `~text~` | `~función en desuso~` | ~~función en desuso~~ |

<div id="combining-formats">
  ### Combinar formatos
</div>

Puedes combinar estilos de formato:

```mdx
**_negrita y cursiva_**
**~~negrita y tachado~~**
*~~cursiva y tachado~~*
```

***negrita y cursiva***<br />
**~~negrita y tachado~~**<br />
*~~cursiva y tachado~~*

<div id="superscript-and-subscript">
  ### Superíndice y subíndice
</div>

Para expresiones matemáticas o notas al pie, usa etiquetas HTML:

| Tipo | Sintaxis | Ejemplo | Resultado |
|------|--------|---------|--------|
| Superíndice | `<sup>text</sup>` | `example<sup>2</sup>` | example<sup>2</sup> |
| Subíndice | `<sub>text</sub>` | `example<sub>n</sub>` | example<sub>n</sub> |

<div id="links">
  ## Enlaces
</div>

Los enlaces ayudan a los usuarios a navegar entre páginas y acceder a recursos externos. Usa texto de enlace descriptivo para mejorar la accesibilidad y la experiencia del usuario.

<div id="internal-links">
  ### Enlaces internos
</div>

Enlaza a otras páginas de tu documentación usando rutas relativas a la raíz. Omite la extensión del archivo (`.mdx` o `.md`). Las rutas relativas y las rutas con extensión no funcionan en producción.

```mdx
[Inicio rápido](/quickstart)
[Pasos](/components/steps)
```

[Guía rápida](/es/quickstart)<br />
[Pasos](/es/components/steps)

<div id="external-links">
  ### Enlaces externos
</div>

Para los recursos externos, incluye la URL completa:

```mdx
[Guía de Markdown](https://www.markdownguide.org/)
```

[Guía de Markdown](https://www.markdownguide.org/)

<div id="broken-links">
  ### Enlaces rotos
</div>

Puedes comprobar si hay enlaces rotos en tu documentación usando la [CLI](/es/cli):

```bash
mint broken-links
```

<div id="block-quotes">
  ## Citas en bloque
</div>

Las citas en bloque destacan información importante, citas o ejemplos dentro de tu contenido.

<div id="single-line-block-quotes">
  ### Citas en bloque de una sola línea
</div>

Agrega `>` antes del texto para crear una cita en bloque:

```mdx
> Este es un texto que se destaca del contenido principal.
```

> Este es un texto que destaca del contenido principal.


<div id="multi-line-block-quotes">
  ### Citas en bloque de varias líneas
</div>

Para citas largas o de varios párrafos:

```mdx
> Este es el primer párrafo de una cita en bloque de varias líneas.
>
> Este es el segundo párrafo, separado por una línea en blanco con `>`.
```

> Este es el primer párrafo de una cita en bloque de varias líneas.
>
> Este es el segundo párrafo, separado por una línea en blanco con `>`.

<Tip>
  Usa las citas en bloque con moderación para mantener su impacto visual y su significado. Considera usar [llamadas](/es/components/callouts) para notas, advertencias y otra información.
</Tip>


<div id="mathematical-expressions">
  ## Expresiones matemáticas
</div>

Ofrecemos compatibilidad con LaTeX para representar expresiones y ecuaciones matemáticas. Puedes anular la detección automática configurando `styling.latex` en `docs.json` en tus [ajustes](/es/organize/settings-appearance#styling).

<div id="inline-math">
  ### Matemáticas en línea
</div>

Usa un solo signo de dólar, `$`, para expresiones matemáticas en línea:

```mdx
El teorema de Pitágoras establece que $(a^2 + b^2 = c^2)$ en un triángulo rectángulo.
```

El teorema de Pitágoras establece que $(a^2 + b^2 = c^2)$ en un triángulo rectángulo.

<div id="block-equations">
  ### Ecuaciones en bloque
</div>

Usa dos signos de dólar, `$$`, para ecuaciones en bloque:

```mdx
$$
E = mc^2
$$
```

$$
E = mc^2
$$

<Info>
  La compatibilidad con LaTeX requiere una sintaxis matemática correcta. Consulta la [documentación de LaTeX](https://www.latex-project.org/help/documentation/) para obtener pautas completas sobre la sintaxis.
</Info>

<div id="line-breaks-and-spacing">
  ## Saltos de línea y espaciado
</div>

Controla los saltos de línea y el espaciado para mejorar la legibilidad del contenido.

<div id="paragraph-breaks">
  ### Saltos de párrafo
</div>

Separe los párrafos con líneas en blanco:

```mdx
Este es el primer párrafo.

Este es el segundo párrafo, separado por una línea en blanco.
```

Este es el primer párrafo.

Este es el segundo párrafo, separado por una línea en blanco.

<div id="manual-line-breaks">
  ### Saltos de línea manuales
</div>

Usa etiquetas HTML `<br />` para forzar saltos de línea dentro de párrafos:

```mdx
Esta línea termina aquí.<br />
Esta línea comienza en una nueva línea.
```

Esta línea termina aquí.<br />
Esta línea comienza en una línea nueva.

<Tip>
  En la mayoría de los casos, separar los párrafos con líneas en blanco ofrece mejor legibilidad que insertar saltos de línea manuales.
</Tip>

<div id="horizontal-rules">
  ### Líneas horizontales
</div>

Usa la sintaxis Markdown `---` o las etiquetas HTML `<hr />` para agregar una línea horizontal que separe visualmente las secciones de contenido:

```mdx
Content preceding the rule.

<hr />

Content following the rule.
```

Contenido antes de la línea.

<hr />

Contenido después de la línea.

<Tip>
  Usa las líneas horizontales con moderación. En la mayoría de los casos, los encabezados proporcionan una mejor separación de contenido con el beneficio adicional de los anclajes de navegación.
</Tip>

<div id="comments">
  ## Comentarios
</div>

Usa comentarios al estilo MDX para añadir notas, recordatorios o tareas pendientes en tus archivos fuente. Los comentarios no se muestran en la página publicada.

```mdx
{/* Este es un comentario y no aparecerá en la documentación publicada. */}

{/*
  Los comentarios de varias líneas también funcionan.
  Útiles para tareas pendientes o notas para revisores.
*/}
```

<Warning>
  Los comentarios al estilo HTML `<!-- ... -->` no son compatibles con MDX. Usa siempre `{/* ... */}`.
</Warning>

<div id="escape-special-characters">
  ## Escapar caracteres especiales
</div>

MDX trata `{` y `}` como el inicio y el final de una expresión JSX, y `<` como el inicio de una etiqueta JSX. Cuando quieras que estos caracteres se muestren como texto literal, escápalos para que MDX no intente analizarlos.

| Carácter | Cómo escaparlo |
| :--- | :--- |
| `{` y `}` | Envuelve el carácter en comillas invertidas (`` `{` ``), usa la entidad HTML (`&#123;` para `{`, `&#125;` para `}`) o escríbelo dentro de una expresión JSX como una cadena (`{'{'}`). |
| `<` | Envuelve en comillas invertidas (`` `<` ``), usa la entidad HTML `&lt;` o escribe `{'<'}`. |
| `` ` `` | Usa una barra invertida (`` \` ``) o envuelve un fragmento más largo en comillas invertidas dobles (`` ``código con ` dentro`` ``). |
| `\` | Usa una doble barra invertida (`\\`). |

```mdx Ejemplos de escape
Usa la sintaxis `{variable}` para interpolar valores.

El marcador &#123;name&#125; se muestra como llaves literales.

En JSX, escribe {'{ key: value }'} para mostrar un objeto literal.
```

Dentro de los bloques de código delimitados (```` ``` ````), MDX no analiza las llaves, por lo que puedes escribir `{variable}` directamente sin escapar. El escape solo es necesario en la prosa normal y dentro de los atributos JSX.

<div id="best-practices">
  ## Buenas prácticas
</div>

<div id="content-organization">
  ### Organización del contenido
</div>

* Usa encabezados para crear una jerarquía de contenido clara
* Respeta la jerarquía correcta de encabezados (no saltes de H2 a H4)
* Escribe encabezados descriptivos con palabras clave

<div id="text-formatting">
  ### Formato de texto
</div>

* Usa la negrita para enfatizar, no para párrafos completos
* Reserva la cursiva para términos, títulos o un énfasis sutil
* Evita el exceso de formato que distraiga del contenido

### Enlaces

- Escribe un texto de enlace descriptivo en lugar de «haz clic aquí» o «leer más»
- Usa rutas relativas a la raíz para los enlaces internos
- Comprueba los enlaces regularmente para evitar referencias rotas