Este tutorial de Markdown es una introducción a su sintaxis. Aprenderás cómo utilizar Markdown para dar formato a tu texto de manera sencilla. El tutorial aborda los conceptos básicos de Markdown, incluyendo encabezados, párrafos, listas, enlaces e imágenes. Además, te muestra 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
Veamos algunos editores de texto populares que admiten la edición y visualización de archivos Markdown:
- Typora: Un editor de Markdown minimalista y potente con una vista previa en tiempo real.
- 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».
- 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».
- Sublime Text: Un editor de texto ligero y rápido con una amplia gama de complementos y extensiones para la edición de Markdown.
- MarkdownPad: Un editor de Markdown dedicado con una interfaz sencilla y funciones específicas para la edición y vista previa de Markdown.
- 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:
- 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. - 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. Tachado: Puedes utilizar dos virgulillas (~~) alrededor de una palabra o frase para mostrarla tachada. Por ejemplo,~~tachado~~se muestra comotachado.- Citas: Puedes crear citas utilizando el símbolo de mayor que (
>). Por ejemplo:> Esto es una cita. > - Autor - Líneas horizontales: Puedes crear líneas horizontales utilizando tres guiones (
---), tres asteriscos (***) o tres guiones bajos (___). Por ejemplo:--- - É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:
4.7. Tablas
En Markdown, puedes crear tablas para organizar y presentar datos de manera estructurada. Veamos cómo crear tablas en Markdown:
- 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 |
- 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:
- Párrafos:
Para crear un párrafo, escribe tu texto en líneas consecutivas sin dejar líneas en blanco entre ellas y presionando Enter. Ten en cuenta que, al igual que pasa con HTML, Markdown no soporta dobles líneas en blanco, así que si intentas generarlas estas se convertirán en una sola al procesarse. Por ejemplo:
Este es un párrafo. Este es otro párrafo.
- Saltos de línea:
Si quieres 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, si quisieras escribir un poema corto, quedaría tal que así:
La luna brilla, reflejada en el lago, noche tranquila.
Donde cada verso tiene dos espacios en blanco al final.
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. Tutorial Markdown: Ejercicios resueltos
Con este conjunto de ejercicios prácticos resueltos podrás poner en práctica tus habilidades sobre Markdown.
Esperamos que este tutorial de Markdown te haya sido de utilidad. Puedes seguir formándote en el siguiente enlace de cursos y tutoriales de diseño y desarrollo web.