Skip to main content

Crear y resaltar bloques de código

Compartir muestras de código con bloques de código cercados y habilitar el resaltado de la sintaxis

Bloques de código delimitados

Puede crear bloques de código delimitados colocando comillas simples triples ``` antes y después del bloque de código. Te recomendamos dejar una línea en blanco antes y después de los bloques de código para facilitar la lectura del formato sin procesar.

```
function test() {
  console.log("notice the blank line before this function?");
}
```

Captura de pantalla de Markdown GitHub representado mostrando cómo los tres caracteres de acento grave representan los bloques de código en formato crudo. El bloque comienza por "function test() {".

Tip

Para preservar tu formato en una lista, asegúrate de dejar una sangría de ocho espacios en los bloques de código no delimitados.

Para mostrar las comillas simples triples en un bloque de código cercado, enciérralas en comillas simples cuádruples.

````
```
Look! You can see my backticks.
```
````

Captura de pantalla de Markdown GitHub en la que se muestra cómo cuatro caracteres de acento grave hacen que los tres caracteres de acento grave que rodean un bloque de código permanezcan visibles. En el bloque pone: "Look! You can see my backticks".

Si editas fragmentos de código y tablas con frecuencia, puedes beneficiarte de habilitar una fuente de ancho fijo en todos los campos de comentarios de GitHub. Para obtener más información, vea «Acerca de escritura y formato en GitHub».

Resaltado de sintaxis

Puedes agregar un identificador opcional de idioma para habilitar el resaltado de la sintaxis en tu bloque de código cercado.

El resaltado de sintaxis cambia el color y el estilo del código fuente para facilitar la lectura.

Por ejemplo, para resaltar la sintaxis del código Ruby:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Se mostrará el bloque de código con resaltado de sintaxis:

Captura de pantalla de tres líneas de código Ruby tal y como se muestra en GitHub. Los elementos del código se muestran en caracteres morados, azules y rojos para facilitar su lectura.

Usamos Linguist (Lingüista) para realizar la detección de idioma y seleccionar gramáticas de terceros para el resaltado de sintaxis. Puede averiguar qué palabras clave son válidas en el archivo YAML de idiomas.

Crear diagramas

También puede usar bloques de código para crear diagramas en Markdown. GitHub admite la sintaxis Mermaid, GeoJSON, TopoJSON y STL ASCII. Para obtener más información, vea «Crear diagramas».

Información adicional