Cómo escribir un bloque de código en Markdown:rodéalo con tres backticks.

Un bloque de código conserva tus espacios, usa una fuente monoespaciada y, con el nombre de un lenguaje, recibe colores de sintaxis. Aquí tienes la sintaxis de los delimitadores, las etiquetas de lenguaje y qué hacer cuando el propio código contiene backticks.

macOS 14 o posterior. Leer es gratis; editar y revisar se pagan una sola vez.

Respuesta rápida

Pon tres backticks en la línea anterior y en la posterior al código. Escribe el lenguaje justo después de los backticks de apertura para activar el resaltado de sintaxis. Para código dentro de una frase, enciérralo entre backticks simples.

```swift
let greeting = "Hello"
print(greeting)
```

·

Bloques de código con delimitadores

Un delimitador es una línea de al menos tres backticks, y el bloque termina con una línea de al menos la misma longitud. Todo lo de en medio se muestra tal como se escribió: sin negrita, sin enlaces, sin unir líneas.

```
plain text, no colors
  indentation is kept
```

Puedes usar tres tildes en su lugar: ~~~ abre y ~~~ cierra. Los dos tipos no se mezclan, así que un bloque que abre con tildes debe cerrar con tildes. Sangrar cada línea cuatro espacios también crea un bloque de código, el estilo antiguo, pero no puede llevar nombre de lenguaje, así que los delimitadores son mejor opción.

Etiquetas de lenguaje y resaltado de sintaxis

La palabra después del delimitador de apertura es la cadena de información. La mayoría de las apps la usan para elegir un resaltador:

```json
{ "name": "dotmd", "private": true }
```

Nombres habituales que funcionan en GitHub, DotMD y la mayoría de las demás apps:

  • js o javascript, ts o typescript, python, swift, go, rust
  • bash, sh o zsh para comandos de shell
  • json, yaml, html, css, sql
  • markdown o md para mostrar el propio Markdown, diff para cambios, text para no usar colores

La lista exacta de nombres depende de la app y de su resaltador. Un nombre que la app no conoce no es un error: el bloque simplemente se muestra sin colores. Un bloque sin lenguaje también se muestra en texto plano.

Mostrar backticks dentro de un bloque de código

Si el código contiene una línea de tres backticks, usa un delimitador más largo. El delimitador de cierre debe ser al menos tan largo como el de apertura, así que usa cuatro para mostrar tres:

````markdown
```swift
let x = 1
```
````

Así muestra esta página ejemplos de Markdown que contienen bloques de código. Los delimitadores de tildes funcionan igual: un bloque abierto con ~~~~ puede contener ~~~.

Código en línea

Para un comando o un nombre dentro de una frase, enciérralo entre backticks simples: `npm install` da npm install. Para mostrar un backtick, pon todo entre backticks dobles y añade un espacio dentro si el código empieza o termina con un backtick:

``a `tick` inside``

El código en línea también evita que caracteres como * y _ se lean como formato, lo que lo hace ideal para nombres de archivo y variables.

Código dentro de listas y citas

Un bloque con delimitadores puede ir dentro de un elemento de lista. Sangra el delimitador para alinearlo con el texto del elemento y que siga formando parte de él:

1. Install the tool:

   ```bash
   brew install example
   ```

2. Run it.

Pon una línea en blanco antes del delimitador y mantén cada línea del código con la misma sangría. En una cita en bloque, empieza cada línea del delimitador con >.

Bloques diff

Marca un bloque como diff y las líneas que empiecen por + o - se muestran en verde y rojo en las apps que resaltan diffs, incluida GitHub:

```diff
- let timeout = 30
+ let timeout = 60
```

Es una forma cómoda de mostrar un cambio en un documento, un README o una spec sin capturas de pantalla.

Errores habituales

  • Un delimitador de cierre más corto que el de apertura, de modo que el bloque nunca termina y se traga el resto de la página.
  • Espacios antes de la etiqueta de lenguaje en apps estrictas. Escribe ```js, no ``` js, si no aparecen los colores.
  • Mezclar backticks y tildes en un mismo bloque.
  • Sin línea en blanco antes del delimitador después de un elemento de lista o un párrafo en algunas apps. Añade una.
  • Comillas tipográficas. El texto pegado desde un procesador de textos puede convertir las comillas rectas del código en comillas curvas. Pega como texto sin formato.

Algunos delimitadores no sirven para mostrar código. Un bloque marcado como mermaid se dibuja como diagrama en GitHub y en DotMD, siempre que la sintaxis sea válida.

Comprobar los colores

La prueba más rápida de una etiqueta de lenguaje es abrir el archivo en un lector. DotMD colorea los bloques con delimitadores usando highlight.js en tema claro y oscuro y muestra un botón Copy al pasar el cursor por un bloque. Leer es gratis, y la chuleta de Markdown tiene el resto de la sintaxis en una página.

Preguntas sobre los bloques de código en Markdown

¿Cómo hago un bloque de código en Markdown?

Pon tres backticks en la línea anterior y en la posterior al código, y opcionalmente el nombre del lenguaje después de los backticks de apertura. Cuatro espacios de sangría también sirven, pero no pueden llevar lenguaje.

¿Cómo añado resaltado de sintaxis a un bloque de código de Markdown?

Escribe el lenguaje justo después del delimitador de apertura, por ejemplo ```python. La app elige los colores; un nombre que no conoce muestra texto plano.

¿Cómo pongo backticks dentro de un bloque de código de Markdown?

Abre y cierra el bloque con un delimitador más largo que cualquier cosa de su interior, por ejemplo cuatro backticks alrededor de código que contiene tres. Usa backticks dobles para código en línea que contiene uno.

¿Qué diferencia hay entre ``` y ~~~?

Ninguna en el aspecto del bloque. Ambos son delimitadores, pero un bloque debe cerrarse con el mismo carácter con el que se abrió.

Más preguntas