Tutorial Markdown

El tutorial de Markdown ofrece una introducción a esta sintaxis de formato de texto ligero. Aprenderás cómo utilizar Markdown para dar formato a tu texto de manera sencilla y eficiente. El tutorial abordará los conceptos básicos de Markdown, incluyendo encabezados, párrafos, listas, enlaces e imágenes. Además, te mostrará cómo integrar fragmentos de código y resaltar texto. Con este tutorial, estarás en camino de crear documentos limpios y bien estructurados utilizando Markdown.

Este tutorial es solo una introducción a Markdown. Puedes encontrar más información en la documentación de Markdown.

1. Tutorial Markdown: Introducción

Markdown es un lenguaje de marcado ligero que se utiliza para formatear texto de manera sencilla y legible. Con Markdown, puedes agregar rápidamente encabezados, listas, enlaces e incluso imágenes a tus documentos sin tener que preocuparte por la sintaxis de HTML. Es ampliamente utilizado en diversas plataformas, como blogs, foros y plataformas de escritura colaborativa, debido a su simplicidad y facilidad de uso.

Markdown fue creado por John Gruber y Aaron Swartz en 2004 con el objetivo de proporcionar una sintaxis simple y legible para escribir en la web. El objetivo era diseñar un lenguaje de marcado que fuera fácil de usar y permitiera a los escritores concentrarse en el contenido en lugar de en la sintaxis de HTML.

Un documento Markdown se guarda normalmente con la extensión de archivo «.md» o «.markdown». Estas extensiones indican que el archivo contiene texto formateado en Markdown. De esta manera, podrás abrir y editar el archivo Markdown en cualquier momento utilizando un editor de texto compatible con Markdown.

Por otra parte, hay que tener en cuenta que el aspecto visual de un documento Markdown puede variar ligeramente según el navegador o el software que se utilice para visualizarlo. Esto se debe a que Markdown se convierte en HTML y, finalmente, es el navegador el encargado de interpretar y representar ese HTML de acuerdo con sus estilos y configuraciones. Algunos navegadores pueden aplicar estilos predeterminados adicionales o tener diferentes interpretaciones de ciertas reglas de formato.

2. Por qué usar Markdown

Hay varias razones por las cuales usar Markdown puede ser beneficioso:

1. Sintaxis simple: Markdown tiene una sintaxis fácil de aprender y utilizar. No es necesario recordar etiquetas HTML complicadas, ya que se basa en convenciones de formato comunes en los correos electrónicos y mensajes de texto plano.
2. Legibilidad: El formato de Markdown es legible tanto en su forma original como en su versión convertida a HTML. Los documentos Markdown son más fáciles de leer y entender, lo que facilita la colaboración y el intercambio de información.
3. Portabilidad: Los archivos Markdown son archivos de texto plano, lo que significa que se pueden abrir y editar en cualquier editor de texto. Además, la mayoría de las plataformas y aplicaciones admiten Markdown de forma nativa, lo que permite compartir contenido de manera sencilla.
4. Versatilidad: Markdown se puede utilizar en una amplia gama de aplicaciones y contextos, como blogs, sitios web, documentación técnica, notas y más. Es compatible con diferentes elementos de formato, como encabezados, listas, enlaces, imágenes y código.
5. Eficiencia: Al utilizar Markdown, se puede escribir y formatear el contenido de manera más rápida y eficiente. No es necesario realizar múltiples clics o usar atajos complicados. La sintaxis intuitiva permite enfocarse en el contenido en lugar de en la forma en que se presenta.
6. Plataformas: Hay multitud de herramientas y plataformas que utilizan Markdown como formato de escritura y visualización. Algunas de las más populares son: plataformas de blogging como WordPress, sistemas de control de versiones como GitHub, herramientas de documentación como Readme.io, etc.

3. Editores de texto para trabajar con Markdown

Aquí tienes algunos editores de texto populares que admiten la edición y visualización de archivos Markdown:

1. Typora: Un editor de Markdown minimalista y potente con una vista previa en tiempo real.
2. Visual Studio Code: Un editor de código fuente altamente personalizable con el que se puede trabajar con Markdown. También tiene soporte adicional con la extensión «Markdown All in One».
3. Atom: Un editor de texto de código abierto y altamente personalizable que ofrece una experiencia de edición de Markdown fluida con la extensión «Markdown Preview Enhanced».
4. Sublime Text: Un editor de texto ligero y rápido con una amplia gama de complementos y extensiones para la edición de Markdown.
5. MarkdownPad: Un editor de Markdown dedicado con una interfaz sencilla y funciones específicas para la edición y vista previa de Markdown.
6. Notepad++: Un editor de texto gratuito y de código abierto que también admite la edición y resaltado de sintaxis de archivos Markdown.

En este tutorial vamos a usar Visual Studio Code puesto que es el editor que hemos usado en resto de tutoriales del bloque de diseño y desarrollo web:

4. Sintaxis de Markdown

Como hemos visto, Markdown es un lenguaje de marcado que, en contraste con HTML, es más fácil de leer para el ojo humano. A continuación se muestra un ejemplo sencillo de HTML y su equivalencia en Markdown:

documento.html

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo HTML</title>
</head>
<body>
  <h1>Título del artículo</h1>
  
  <p>Este es un párrafo de ejemplo que describe la sintaxis básica de Markdown.</p>
  
  <h2>Listado de elementos Markdown:</h2>
  
  <ul>
    <li>Encabezados</li>
    <li>Párrafos</li>
    <li>Listas</li>
  </ul>
</body>
</html>

documento.md

# Título del artículo

Este es un párrafo de ejemplo que describe la sintaxis básica de Markdown.

## Listado de elementos Markdown:

- Encabezados
- Párrafos
- Listas

Al igual que pasa con HTML, el aspecto visual de un documento Markdown puede variar según el navegador o el software que se utilice para visualizarlo. Veamos la sintaxis de Markdown con ejemplos de algunos de los elementos que se pueden crear.

4.1. Encabezados

Utiliza uno o varios símbolos (#) al principio de una línea para crear encabezados de diferentes niveles, del 1 al 6.
Ejemplo:

   # Encabezado de nivel 1
   ## Encabezado de nivel 2
   ### Encabezado de nivel 3

4.2. Formatos de texto

En Markdown, puedes aplicar varios formatos de texto para resaltar y dar énfasis a tus palabras. A continuación, se muestran algunos ejemplos de formatos de texto comunes:

1. Negrita: Puedes utilizar el doble asterisco (**) o el doble guion bajo (__) alrededor de una palabra o frase para resaltarla en negrita. Por ejemplo, **negrita** se muestra como negrita.
2. Cursiva: Puedes utilizar un solo asterisco (*) o un solo guion bajo (_) alrededor de una palabra o frase para mostrarla en cursiva. Por ejemplo, *cursiva* se muestra como cursiva.
3. Tachado: Puedes utilizar dos virgulillas (~~) alrededor de una palabra o frase para mostrarla tachada. Por ejemplo, ~~tachado~~ se muestra como tachado.
4. Citas: Puedes crear citas utilizando el símbolo de mayor que (>). Por ejemplo: > Esto es una cita. > - Autor
5. Líneas horizontales: Puedes crear líneas horizontales utilizando tres guiones (---), tres asteriscos (***) o tres guiones bajos (___). Por ejemplo: ---
6. Énfasis: Puedes enfatizar el texto utilizando asteriscos (*) o guiones bajos (_) alrededor de las palabras o frases.
   Por ejemplo: *Texto enfatizado* _Texto enfatizado_

4.3. Listas y enumeraciones

En Markdown, puedes crear listas tanto ordenadas como no ordenadas.

Las listas no ordenadas se crean utilizando el símbolo de guion (-), el asterisco (*) o el signo más (+) al comienzo de cada línea. Por ejemplo:

- Elemento 1
- Elemento 2
- Elemento 3

* Elemento 1
* Elemento 2
* Elemento 3

+ Elemento 1
+ Elemento 2
+ Elemento 3

Esto generará una lista sin orden específico, donde cada elemento se mostrará con un marcador.

Las listas ordenadas se crean utilizando números seguidos de un punto al comienzo de cada línea. Por ejemplo:

1. Elemento 1
2. Elemento 2
3. Elemento 3

Esto generará una lista ordenada, donde cada elemento se mostrará con un número secuencial.

También puedes crear listas anidadas al agregar cuatro espacios de indentación antes de los elementos secundarios. Por ejemplo:

- Elemento 1
    - Elemento 1.1
    - Elemento 1.2
- Elemento 2
    - Elemento 2.1
    - Elemento 2.2

Esto generará una lista anidada donde los elementos secundarios están indentados debajo de sus elementos primarios.

Puedes combinar listas ordenadas y no ordenadas en el mismo documento según tus necesidades. Recuerda dejar una línea en blanco antes y después de las listas para que se muestren correctamente en la salida final.

4.4. Comentarios

No hay una sintaxis específica para añadir comentarios en el texto. Sin embargo, hay una forma comúnmente utilizada para simular comentarios mediante elementos que no se renderizan en la salida final. Al incluir el texto entre los delimitadores <!-- y -->, se indica al procesador Markdown que ignore ese contenido y no lo muestre en la versión final del documento.
Ejemplo:

  <!-- comentario -->

4.5. Enlaces

Para crear enlaces, encierra el texto del enlace entre corchetes [] y luego coloca la URL del enlace entre paréntesis ().
Ejemplo:

   [Texto del enlace](http://www.ejemplo.com)

4.6. Imágenes

Para insertar imágenes, utiliza un formato similar al de los enlaces, pero agrega un signo de exclamación (!) al principio.
Ejemplo:

   ![Texto alternativo](ruta/imagen.jpg)

4.7. Tablas

En Markdown, puedes crear tablas para organizar y presentar datos de manera estructurada. Veamos cómo crear tablas en Markdown:

1. Estructura de la tabla:

Utiliza el carácter de barra vertical (|) para separar las columnas y los guiones (-) para definir la línea de encabezado y separar las filas de la tabla. Por ejemplo:

| Encabezado 1 | Encabezado 2 | Encabezado 3 |
| ------------ | ------------ | ------------ |
| Dato 1      | Dato 2      | Dato 3      |
| Dato 4      | Dato 5      | Dato 6      |

2. Alineación de las columnas:

Puedes alinear el texto en las columnas utilizando dos puntos (:) antes o después del guion de separación. Por ejemplo, :--- alinea a la izquierda, ---: alinea a la derecha y :---: alinea al centro. Por ejemplo:

| Alineado a la izquierda | Alineado al centro | Alineado a la derecha |
| :--------------------- | :----------------: | -------------------: |
| Dato 1                 |      Dato 2        |             Dato 3   |
| Dato 4                 |      Dato 5        |             Dato 6   |

4.8. Código

Para mostrar código en Markdown, puedes utilizar varias opciones, dependiendo del tipo de código y del formato que desees. Para crear código en una línea utiliza el acento grave (`). Por ejemplo: `var nombre = "John";`.

4.9. Párrafos y saltos de línea

En Markdown, puedes crear párrafos y realizar saltos de línea de la siguiente manera:

1. Párrafos:
   Para crear un párrafo, simplemente escribe tu texto en líneas consecutivas sin dejar líneas en blanco entre ellas. Por ejemplo:

Este es un párrafo.
Este es otro párrafo.

2. Saltos de línea:
   Si deseas realizar un salto de línea sin crear un nuevo párrafo, puedes añadir dos espacios al final de la línea actual y luego presionar Enter. Por ejemplo:

Esta línea termina con dos espacios.  
Esta es la siguiente línea.

Ten en cuenta que los saltos de línea y los párrafos son interpretados por el motor de renderizado Markdown, por lo que la visualización puede variar según la plataforma o el editor que estés utilizando.

5. Ejercicios resueltos: Tutorial Markdown

Con este conjunto de ejercicios prácticos resueltos podrás poner en práctica tus habilidades sobre Markdown.

5.1. Tutorial Markdown. Ejercicio: Receta tarta de manzana

Ejercicio:

Crea un archivo Markdown para documentar los pasos necesarios para hacer una tarta de manzana. Incluye una lista de ingredientes, los pasos de preparación y algunos consejos adicionales. Asegúrate de utilizar adecuadamente las etiquetas de encabezado, listas y formato de texto para hacer el contenido claro y legible. Debe tener la siguiente estructura:

Solución:

# Receta de Tarta de Manzana

## Ingredientes:
- 2 tazas de harina
- 1 taza de azúcar
- 1/2 taza de mantequilla
- 4 manzanas
- 1 cucharadita de canela
- 1/2 cucharadita de nuez moscada
- 1 cucharada de jugo de limón
- 1 huevo

## Pasos de preparación:
1. Precalienta el horno a 180°C.
2. Mezcla la harina, el azúcar y la mantequilla en un tazón hasta obtener una textura arenosa.
3. Pela las manzanas, córtalas en rodajas finas y rocíalas con jugo de limón.
4. Agrega la canela y la nuez moscada a las manzanas y mezcla bien.
5. Extiende la mitad de la masa en un molde para tarta y rellena con las manzanas.
6. Cubre con la otra mitad de la masa y sella los bordes.
7. Haz pequeñas aberturas en la parte superior para que salga el vapor.
8. Bate el huevo y cepilla la parte superior de la tarta.
9. Hornea durante 40-45 minutos o hasta que esté dorada.
10. Deja enfriar antes de servir. ¡*Bon appétit*!

## Consejos adicionales:
- Puedes agregar una bola de helado de vainilla como acompañamiento.
- Asegúrate de que las manzanas estén bien maduras para obtener el mejor sabor.
- Si quieres darle un toque extra de sabor, espolvorea un poco de azúcar y canela en la parte superior antes de hornear.

¡*Bon appétit*!

5.2. Tutorial Markdown. Ejercicio: Tabla sobre países

¡Por supuesto! Aquí tienes un ejercicio más complejo que incluye una tabla. La solución está debajo:

Ejercicio:

Crea una tabla que muestre información sobre los países y sus capitales. La tabla debe tener las siguientes columnas: País, Capital y Población.

País	Capital	Población
Estados Unidos	Washington, D.C.	331,002,651
España	Madrid	46,754,778
Francia	París	65,273,511
Alemania	Berlín	83,783,942
Japón	Tokio	126,476,461

Solución:

| País       | Capital    | Población |
|------------|------------|-----------|
| Estados Unidos | Washington, D.C. | 331,002,651 |
| España    | Madrid     | 46,754,778 |
| Francia    | París      | 65,273,511 |
| Alemania   | Berlín     | 83,783,942 |
| Japón      | Tokio      | 126,476,461 |
**Tabla 1**: Información sobre los países y sus capitales