Código en línea y bloques de código en Markdown

Markdown incluye una sintaxis especial para mostrar fragmentos de código o comandos dentro de un texto, manteniendo el formato monoespaciado. Esto es fundamental en documentación técnica, tutoriales y apuntes de programación.

Existen dos formas principales:

  • Código en línea (inline): para fragmentos pequeños.
  • Bloques de código: para fragmentos grandes o múltiples líneas.

11.1 Código en línea (inline)

Se escribe encerrando el fragmento de código entre backticks (`), también llamados comillas invertidas.

Sintaxis:

`código`

Ejemplo:

El comando `ls -l` muestra los archivos en formato detallado.

Renderizado: El comando ls -l muestra los archivos en formato detallado.

👉 Usos típicos: resaltar nombres de funciones, variables o comandos; mostrar ejemplos cortos dentro de un párrafo.

11.2 Bloques de código con triple backticks

Cuando se necesita mostrar varias líneas de código, se utilizan tres backticks consecutivos (```) para abrir y cerrar el bloque.

Sintaxis:

```
línea 1 de código
línea 2 de código
línea 3 de código
```

Ejemplo:

```
def hola():
    print("Hola, Markdown!")
```

Renderizado:

def hola():
    print("Hola, Markdown!")

👉 Este método mantiene los saltos de línea, sangrías y formato del código.

11.3 Especificación de lenguaje para resaltado de sintaxis

Muchas plataformas (como GitHub, GitLab, Bitbucket, Obsidian, etc.) soportan resaltado de sintaxis. Para activarlo, se coloca el nombre del lenguaje justo después de los tres backticks de apertura.

Ejemplo en Python:

```python
def suma(a, b):
    return a + b

print(suma(2, 3))
```

Renderizado con resaltado:

def suma(a, b):
    return a + b

print(suma(2, 3))

Ejemplo en JavaScript:

```javascript
function saludar() {
    console.log("Hola, Markdown!");
}
saludar();
```

Renderizado con resaltado:

function saludar() {
    console.log("Hola, Markdown!");
}
saludar();

👉 El resaltado varía según el visor, pero generalmente es compatible con Python, JavaScript, Java, C/C++, C#, HTML, CSS, JSON, YAML, entre otros.

11.4 Alternativa con indentación (Markdown clásico)

En el Markdown original, antes de popularizarse los backticks triples, los bloques de código se podían crear usando 4 espacios o 1 tabulación al inicio de cada línea.

Ejemplo:

    SELECT * FROM usuarios WHERE activo = 1;

Renderizado:

SELECT * FROM usuarios WHERE activo = 1;

👉 Hoy en día, esta forma casi no se usa porque los backticks triples son más claros y permiten especificar lenguaje.

11.5 Buenas prácticas

  • Usar inline solo para fragmentos cortos o nombres de comandos.
  • Usar bloques con ``` para fragmentos grandes o ejemplos de código.
  • Siempre que sea posible, especificar el lenguaje para mejorar la legibilidad.
  • No abusar del resaltado: el código debe estar ahí para aclarar, no para saturar.
  • Mantener consistencia: elegir entre ``` y la indentación clásica, pero no mezclar estilos en un mismo documento.

11.6 Ejemplo completo

# Ejemplo de código en Markdown

## Código en línea
Para crear un entorno virtual en Python se usa: `python -m venv env`.

## Bloque de código simple
```
echo "Hola, Mundo!"
```

## Bloque de código con resaltado
```javascript
function multiplicar(a, b) {
    return a * b;
}
console.log(multiplicar(4, 5));
```

## Bloque con SQL
```sql
SELECT nombre, edad
FROM usuarios
WHERE activo = 1;
```

Renderizado:

Ejemplo de código en Markdown

Código en línea

Para crear un entorno virtual en Python se usa: python -m venv env.

Bloque de código simple

echo "Hola, Mundo!"

Bloque de código con resaltado

function multiplicar(a, b) {
    return a * b;
}
console.log(multiplicar(4, 5));

Bloque con SQL

SELECT nombre, edad
FROM usuarios
WHERE activo = 1;

Conclusión

El código en línea se crea con backticks simples (`). Los bloques de código se crean con triple backticks (```) y permiten mantener saltos de línea. Se puede añadir el nombre del lenguaje para activar el resaltado de sintaxis en plataformas compatibles. Los backticks triples son hoy el estándar recomendado por su claridad y flexibilidad.

¿Listo para practicar lo aprendido? Visita el visor de Markdown y pon en práctica los conceptos.