Transcription
[Música]
En este video vamos a sumergirnos en el mundo del markdown, un lenguaje de marcado ligero diseñado para ser fácil de escribir y leer, convirtiendo texto plano en HTML de manera eficiente. Seguramente lo has visto porque es utilizado ampliamente por escritores, académicos, desarrolladores, creadores de contenido, etcétera, y es el lenguaje que se utiliza en los README de GitHub. Así que si alguna vez usas algún repositorio de GitHub, seguramente que te cruzaste con markdown.
Además, es obviamente ampliamente compatible con plataformas de gestión de contenido, sistemas de control de versiones como Bitbucket, etcétera, y distintos entornos de desarrollo como esto que te voy a mostrar acá en Visual Studio Code. Estas son las características que lo hacen tan, tan importante dentro del mundo del desarrollo de software. Te voy a mostrar acá las características principales en el menor tiempo posible.
Lo primero que voy a hacer va a ser crear un archivo. Archivo, le voy a poner `sample.md`. Esa es la extensión que tiene todo archivo de markdown. Y fíjense que ahora aquí me va a aparecer la posibilidad de abrir el preview, con lo cual yo, a medida que vaya escribiendo mi markdown, voy a poder ver a la derecha cómo se ve.
Pero antes, te quiero contar que este video está sponsoreado por mi propio newsletter. Un newsletter semanal en donde envío reflexiones, tutoriales y contenido relevante para nuestra carrera dentro de la programación. Te dejo el link en la descripción. Suscribite que es gratis y estoy seguro de que vas a encontrar algo que te sirva.
La idea principal del markdown es poder convertir texto en lenguaje natural o seminatural, como vamos a ver ahora, a código HTML. Con lo cual, podemos empezar, por ejemplo, con un encabezado. Simplemente agregando numeral y el texto, vamos a tener un encabezado. Y lo interesante es que la cantidad de numerales que agregamos nos define el tamaño de ese encabezado. Mientras más numerales tengas, más pequeño va a ser el encabezado en comparación con los otros. Entonces, por ejemplo, así se ve esto. El que tiene menos numerales es el encabezado más grande.
Darle formato al texto también es muy sencillo. Acá lo hacemos simplemente, por ejemplo, utilizando asterisco al principio y asterisco al final, lo que nos da como resultado el texto acá en itálica, en cursiva. Y también lo podríamos hacer utilizando guion bajo. Sí, fíjense, por ejemplo, acá el texto no está contenido ni en los asteriscos ni en los guiones bajos, con lo cual tiene el formato común y a los costados están las dos opciones del texto en itálica.
Si quisiéramos poner el texto en negrita, simplemente lo haríamos con dos asteriscos o, como seguramente ya adivinaste, con dos guiones bajos. Entonces, con solo delimitar el principio y el final, lo que esté contenido en el medio va a ser traducido a, en este caso, por ejemplo, negrita. Y podríamos combinar las dos opciones. Si hacemos tres asteriscos o hacemos tres guiones bajos, vamos a obtener la combinación de los dos. El texto va a quedar en negrita y también en itálica a la vez.
Y ahora hablemos un poco de listas, que también es un elemento muy importante en HTML. Simplemente con el guion, vamos a obtener aquí a la derecha el punto que nos delimita una lista. Y si hago una abajo de la otra, entonces voy a tener una lista obviamente desordenada, en donde también puedo anidar elementos. Y eso lo voy a hacer utilizando indentación, utilizando un espacio nada más que con esto ya el markdown comprende que este elemento tiene que estar abajo de este y agrega el clásico icono que tenemos ahí cuando tenemos un ítem anidado. Y así podríamos seguir hasta el infinito. Sí, podríamos tener, igual que en HTML, la cantidad de elementos anidados que queremos.
Ahora bien, una lista ordenada simplemente la hacemos con los valores numéricos. Uno punto, dos punto. Ahí ya me entrega una lista ordenada.
Otro elemento clave que seguramente necesitamos en todo documento es un link. Escribir un link tiene dos partes. Primero, la parte del texto que la vamos a poner entre corchetes. Así como está, no reconoce todavía que esto es un link y me lo imprime simplemente como texto. Pero si a continuación, entre paréntesis, agrego una URL, inmediatamente se dio cuenta el markdown que esto es un link y entonces me lo marca como tal. La parte del texto, la parte del label del link, es la que va entre corchetes. La parte de la URL, la dirección a la cual se tiene que dirigir, va entre paréntesis.
Algo muy parecido pasa con las imágenes. Entre corchetes, vamos a escribir el título alternativo que va a aparecer si la imagen o la URL de la imagen no existe o no es accesible. Pero vamos a tener que agregar al principio el signo de admiración. Así como está, todavía no me reconoce que esto puede llegar a ser una imagen. Pero si a continuación y entre paréntesis agrego el link, ahora sí aparece la imagen. Y si esto estuviese mal, supongamos que esta URL no es accesible por algún motivo, este es el label que va a aparecer. Este es el famoso atributo alt de la imagen. Pero en esencia, son muy parecidos la forma de agregar links con la forma de agregar imágenes.
El markdown también nos permite agregar citas. La forma de agregar una cita es con un solo carácter que es este, el signo mayor que. Agregando ese símbolo, lo que sea que esté a continuación va a estar dentro de, como dice aquí, un blockquote, que obviamente va a seguir y seguir en tanto y en cuanto no lo terminemos. Sí, comienza con este símbolo y termina con este símbolo, tal cual como es en todos los elementos que vamos a ver de markdown.
Además, tenemos acceso a tablas, que seguramente las has visto, especialmente como decía en la documentación de GitHub. Siempre es muy común que agreguemos o que necesitemos agregar algún tipo de tabla para mostrar algo. Bueno, el formato de la tabla es también bastante intuitivo, pero sí que necesita un formato al cual no podemos escapar, digamos. El formato que tiene que ser. Voy a agregar, por ejemplo, aquí una línea en donde voy a tener las barras verticales o los pipes. A continuación, voy a poner `header 1`, `header 2`, `header 3`. Fíjense que así como está, no me reconoce nada más que texto por ahora. Esto para el markdown no es más nada. Pero si abajo, inmediatamente alineado, tal cual, pongo de nuevo los pipes y pongo unas líneas divisorias, ahora sí interpreto que esto es una tabla. Con lo cual, agrego bordes y, incluso, esto está en negrita. O sea, que se dio cuenta de que esto es un encabezado y que lo que viene ahora es una tabla. Y si sigo, siempre respetando la línea vertical, agrego de nuevo los pipes, agrego algo de información. Ahora sí aparece una tabla como esperaríamos que aparezca. El encabezado aparece en negrita, están todos los bordes y acá abajo puedo seguir agregando tantas filas como quiera. Así se hace una tabla.
Esto, estoy seguro que lo has visto porque se usa mucho. Es bastante inteligente el markdown como para darse cuenta, incluso si tenemos algún que otro problema con la alineación de los elementos. Sí, pero siempre es recomendable, porque a veces cuando aparecen los problemas, que dentro de lo posible esté alineado para que le sea más fácil al conversor entender dónde va cada cosa. Con lo cual, no es súper rígido, va a funcionar igual en la medida en la cual se respeten las columnas, se respete la cantidad de pipes, básicamente.
Algo parecido a esto es la posibilidad de agregar líneas divisorias, que se hacen así con los tres guiones, los mismos que estoy utilizando como separadores aquí del encabezado de los datos en la tabla. Y acá apareció esta línea divisoria.
Pero algo muy interesante que se puede agregar en markdown es la posibilidad de agregar la famosa to-do list, una lista de cosas que podemos tildar o destildar según las hacemos o no las hacemos. Y esto se hace utilizando de nuevo un formato específico. Tengo corchetes, la "x" me va a representar si algo tiene que estar tildado o no. Si no, le puedo dar un espacio, así lo puedo tildar yo. Sí, y ahí va a aparecer la "x". Si lo tildo, va a aparecer la "x" ahí. Es decir, la "x" representa el check, pero voy a tener un corchete, un espacio y el corchete que cierra, y a continuación el label. Y voy a obtener básicamente un checkbox. Decimos que es, digamos, la forma de hacer una to-do list, pero en realidad esto no es más que un checkbox en HTML. Y podemos agregar todos los que tengamos ganas, simplemente por utilizar este formato, lo cual es muy, muy práctico.
Y también podemos agregar una cuestión decorativa, pero no por eso menor: emojis. Haciendo dos puntos y el nombre y cerrando con dos puntos. Esto se va a traducir a un emoji. Seguramente, si usas Slack, esto te parecerá todo muy parecido, porque Slack utiliza un montón de estos formatos para poner negrita, para poner itálicas, para poner emojis, exactamente así como en markdown. Así que seguramente te va a parecer familiar si ya lo has visto ahí.
También hay una forma de escapar el formato, que es con la clásica barra invertida. Por ejemplo, supongamos que necesitamos que el asterisco aparezca en el texto. Bueno, entonces ponemos una barra antes del asterisco. Lo que haríamos intuitivamente para escapar cualquier cosa, bueno, también funciona acá en el markdown. Tenemos la barra siempre antes del símbolo, y entonces ese símbolo va a aparecer como texto.
Acá a la derecha, y a nosotros programadores, lo que más nos importa es el código. Así que te cuento que también se puede. Podemos agregar código inline utilizando estas comillas, o podemos utilizar tres comillas seguidas del lenguaje de programación, y nos va a aparecer la posibilidad de agregar un bloque de código. Por ejemplo, en este caso, JavaScript. Pero también podría ser código Python, utilizando el mismo formato, las tres comillas, Python, y a continuación el código.
Y una última cosa que te quiero mostrar es que podemos también tener una suerte de índice o tabla de contenidos utilizando IDs en las secciones. Es decir, supongamos que tengo aquí un encabezado que le llamo "Tabla de Contenidos". Y supongamos que quiero tener una especie de índice en donde tengo tres links: uno es "Introducción", otro "Development" y otro "Conclusión". Y acá a la derecha todavía no pasa nada si hacemos clic porque no hay nada. Pero ya defino un ID, un lugar a donde ir cuando el usuario hace clic. Y supongamos que aquí abajo los defino. Y además de la sección o el encabezado y los datos o la información, como haría de manera normal, pongo entre llaves el ID. Con lo cual estoy diciendo que esta sección va a tener este ID. Porque esto no aparece acá, este ID es un ID para uso interno dentro del documento. Con lo cual, ahora sí me va a dar el link en donde si le hago clic, "Introducción" va a "Introducción". No se nota mucho, obviamente, porque está todo en la misma página, pero cada vez que le hago clic a uno de los elementos, me lo va a centrar dentro de la pantalla. Sí, básicamente puedo utilizar IDs para determinar o definir la navegación interna de mi documento.
Hasta aquí el video de hoy. Espero que te haya sido útil. Si te gustó el video, déjale un like y suscribite a este canal, que hay un montón de gente que mira el contenido pero no se suscribe. Suscribite que es gratis y es fácil. Muchísimas gracias por quedarte hasta el final y nos vemos la [Música] próxima.