Bloque de Markdown
Comenzamos el bloque de Markdown:
Instalando Visual Studio Code (VSC)
Existen multitud de editores de código que nos permiten trabajar con Markdown, realizar webs o aplicaciones. En este caso, nosotros durante este curso vamos a utilizar a Visual Studio Code como entorno de desarrollo (IDE). ¡IMPORTANTE, no confundir con Visual Studio!
Y durante su instalación (siguiente, siguiente…) es muy importante que marquemos las siguientes opciones:
Una vez instalado, ya podemos abrirlo:
Visual Studio Code Web
En la actualidad además de trabajar con el IDE VSC en su versión desktop, también es posible trabajar desde la versión web.
Para ello, bastaría con visitar la siguiente URL: https://vscode.dev/
Instalando plugins en Visual Studio Code
Bien, tras tener instalado Visual Studio Code (VSC) vamos a instalar una serie de plugins que nos permitirán trabajar mejor con varias tecnologías como son Git, HTML 5, CSS 3, JavaScript… Para instalarlos basta con ir a la barra izquierda de VSC y pulsar sobre el último botón (en el que nos aparece 4 cubitos):
Una vez dentro de esta ventana, simplemente tendremos que buscar uno a uno los plugins que queremos instalar (por ejemplo, Auto Rename Tag) y finalmente pulsar sobre cualquiera de los botones en los que ponga instalar:
📌 ️ — Cuando acabemos de instalar todos los plugins, es necesario reiniciar el VSC para que dichos plugins estén operativos.
El plugin a instalar es:
- Markdown All in One: extensión especialmente útil para simpliciar y mejorar la experiencia de escritura y edición de documento en formato Markdown.
¿Qué es Markdown?
Markdown es un lenguaje de marcado bastante ligero que nos permite formatear textos planos de una forma muy sencilla (mediante a una serie de caracteres) añadiendo: encabezados, negritas, cursivas, listas…
📌 ️ — Markdown no tiene oficialmente un estándar por lo que, en principio, deberíamos de utilizar las reglas definidas por John Gurber durante la creación de Markdown en 2004. Pese a ello, en la gran mayoría de usos se utiliza CommonMark, una especificación de Markdown que está fuertemente definida y es altamente compatible. Durante el curso, nos basaremos en utilizar la especificación CommonMark.
Markdown es una de las formas más importantes en que los desarrolladores pueden hacer que su comunicación sea clara y organizada en problemas y solicitudes de incorporación de cambios.
Si abrimos el Bloc de notas:
Y escribimos algo, podemos ver que estamos trabajando sobre texto plano:
Ya que no tenemos opción de poder poner una parte del texto en negritas, cursivas, etc. Por tanto, texto plano se considera cuando está todo en el mismo formato, es decir, un tipo de fuente especifico, y un tamaño. Y además no exista la posibilidad de cambiarlo solamente en una parte del documento.
📌 ️ — Markdown nace como una alternativa a HTML, ya que con HTML tomar notas es bastante engorroso. Y por tanto, con Markdown se reduce al complejidad de tomar notas. Aportando una mayor legibilidad respecto al texto plano.
Vamos a ver un ejemplo:
📌 ️ — MD es la abreviatura de Markdown, además de la extensión de los ficheros escritos en Markdown.
📌 ️ — Ya sea para escribir documentación, tomar notas, o incluso para subir el fichero de readme.md a GIT. No trabajes con ficheros planos de texto, usa Markdown.
Algunos de los principales sitios en los que podemos trabajar con ficheros de MD son:
- Discourse
- GitHub
- GitLab
- Qt
- Stack Overflow / Stack Exchange
- Swift
Sintaxis de Markdown
Títulos o Encabezados: nos permiten definir títulos o secciones de un contenido.
# Encabezado h1
## Encabezado h2
### Encabezado h3
#### Encabezado h4
##### Encabezado h5
###### Encabezado h6El resultado será el siguiente:
Saltos de línea, párrafos y líneas sin contenido: para escribir un párrafo escribimos el texto sin realizar marcas ningunas. Si queremos realizar un salto de línea, es decir, que el resto del contenido salté a la siguiente línea debemos escribir dos espacios. Y para dejar una línea vacía pulsar un ENTER. Vamos a verlo:
# EjemploEsto es un Línea sin salto de líneaLíneacon saltos delínea
El resultado será el siguiente:
Comentarios: dentro de los comentarios tenemos dos subtipos:
A) Comentarios que pueden estar en la misma línea con otro elemento:
# Comentarios junto a elemento <!-- Comentario -->El resultado será el siguiente:
B) Comentarios que no pueden estar en la misma línea con otro elemento:
[comment]: <> (Comentario que debe ir solo)[//]: <> (Comentario que debe ir solo)[//]: # (Comentario que debe ir solo)<!--Comentario que puede ir o no solo--><!--Comentariomultilíneaque debe ir solo-->
El resultado será el siguiente (un fichero vacío):
Pero realmente ¿Qué crees que pasaría si pusiéramos un elemento con estos comentarios?
# H1 [comment]: <> (Comentario que debe ir solo)Pues que los cogería como un elemento incluido el comentario como un encabezado H1. Vamos a verlo:
Vemos que se ejecuta tanto el comentario como el encabezado como si fueran 1. Por ello para que convivan un elemento con un comentario debemos utilizar <!-- Comentario -->
Negrita: se escribe el texto rodeado con dos asterisco a cada lado **texto** . O sino, también es posible rodearlo de dos barra bajas como alternativa: __texto__:
**Texto en negrita con asteriscos**
__Textos en negrita con barra bajas__El resultado será el siguiente:
Cursiva: se escribe el texto rodeado de un asterisco a cada lado *texto*. O sino, también es posible rodearlo de dos barra bajas como alternativa: _texto_:
*Texto en cursiva con asteriscos*
_Texto en cursiva con barra bajas_El resultado será el siguiente:
Cursiva + negrita: existe la posibilidad de combinar negritas y cursivas en ambas de la siguientes maneras:
***Texto en negrita y cursiva con asteriscos***
___Textos en negrita y cursiva con barra bajas___El resultado será el siguiente:
Citas: se generan utilizando el símbolo de mayor que > antes de la frase. Vamos a ver un ejemplo:
>“¡A mi señal, ira y fuego!🔥” – Máximo Décimo Meridio.
El resultado será el siguiente:
También se pueden escribir en varios párrafos de la siguiente manera:
>"¡A mi señal, ira y fuego!🔥"> Máximo Décimo Meridio.
El resultado será el siguiente:
Además, también se pueden utilizar varios niveles de la siguiente manera:
>"¡A mi señal, ira y fuego!🔥" – Máximo Décimo Meridio.>>Frase de la película>>> "Gladiator"
El resultado será el siguiente:
Listas: en Markdown, también podemos escribir listas. Dentro de las listas tenemos:
A. Listas desordenadas: para escribir listas ordenadas utilizamos los caracteres * , - o + . Si importar hasta el alternarlos, ya que el resultado es el mismo:
- Item 1
- Item 2
* Item 3
* Item 4
+ Item 5
+ Item 6El resultado será el siguiente:
B. Listas ordenadas: se utiliza el número seguido de un punto. Por ejemplo, para escribir el primer elemento escribiríamos: 1.
1. Item 1
2. Item 2
3. Item 3El resultado será el siguiente:
📌 ️ — No es necesario seguir un orden secuencial en las listas.
C. Listas anidadas: existe la posibilidad de anidar listas de la siguiente manera:
El resultado será el siguiente:
Enlaces o links: nos permiten enlazar nuestro documento con otras webs o recursos:
El ejemplo más sencillo sería realizado mediante al link automático:
<http://google.com/>El resultado será el siguiente:
Otra alternativa al link automático sería la siguiente:
[Ir a Google](http://www.google.es)El resultado será el siguiente:
Aunque también podemos añadir un texto descriptivo cuando nos situamos encima de la siguiente manera:
[Visitar Google](https://www.google.es "Texto (cuando ponemos el cursor encima)")El resultado será el siguiente:
Subrayado: En Markdown no existe el subrayado. El motivo es que en Markdown no tiene una sintaxis definida para subrayar texto.
📌 ️ — Supongo que esto se debe a que el texto subrayado es difícil de leer y que solamente se utiliza para realizar hipervínculos.
Tachado: si queremos tachar un texto, debemos englobarlo entre ~~ .Vamos a ver un ejemplo:
~~Texto tachado~~El resultado será el siguiente:
Líneas separadoras o regla horizontales: Nos permiten separar un contenido de otro. Vamos a ver un ejemplo:
## Líneas separadoras escrita sin espacios (se verá igual que la otra)Contenido 1
*** Contenido 2---Contenido 3
___## Líneas separadoras escrita con espacios (se verá igual que la otra)Contenido 1
* * *Contenido 2
- - -Contenido 3
_ _ _
El resultado será el siguiente:
Es importante tener cuidado ya que si los guiones --- están juntos es necesario dejar un espacio entre el texto y el contenido para evitar que lo interprete como un encabezado:
Contenido 2---
Imágenes: nos permiten mostrar imágenes dentro de nuestro documento de Markdown. Vamos a ver un ejemplo:
El resultado será el siguiente:
Imágenes con enlace: existe la posibilidad de combinar imágenes y enlaces de la siguiente manera:
[](www.google.es)El resultado será el siguiente:
Aunque también es posible separar los enlaces para que sea un poco más claro de la siguiente manera:
<!-- Ruta URL de la IMG + Descripción-->[1]:https://user-images.githubusercontent.com/32896437/153675215-dff3448c-56bc-4da0-9cf1-6a394fd9c6f8.png "Pulp Fiction"<!-- Enlace -->[2]: https://es.wikipedia.org/wiki/Pulp_Fiction<!-- Juntando la descrición con el resto de partes partes -->[![ALT text][1]][2]
El resultado será el siguiente:
Código en línea: si queremos escribir solamente un pedazo de código en una línea utilizamos `code` :
Etiqueta HTML5: `<!DOCTYPE html>`Etiqueta HTML: `<html></html>`Etiqueta HEAD: `<head></head>`Etiqueta BODY: `<body></body>`
El resultado será el siguiente:
Códigos de bloque: si queremos escribir un bloque de código hacemos englobando nuestro código entre ```:
```<!DOCTYPE html><html lang="en"><head></head><body></body></html>```
El resultado será el siguiente:
También se puede utilizar ~~~ como alternativa:
~~~<!DOCTYPE html><html lang="en"><head></head><body></body></html>~~~
El resultado será el siguiente:
En ambos casos, podemos especificar el lenguaje que estamos utilizando. En el caso del ejemplo HTML:
~~~ html<!DOCTYPE html><html lang="en"><head></head><body></body></html>~~~
El resultado será el siguiente:
Caracteres especiales: si queremos escribir los conodios como caracteres especiales como son:
` acento invertido
* asterisco
_ guión bajo
{} llaves
[] corchetes
() paréntesis
# almohadilla
+ símbolo de suma
- guión
. punto
! exclamaciónEs decir omitir el formato de Markdown, debemos escribir una \ barra invertida junto al correspondiente carácter. Vamos a ver algunos ejemplos:
\ barra invertida
` acento invertido
* asterisco
_ guión bajo
{} llaves
[] corchetes
() paréntesis
# almohadilla
+ símbolo de suma
- guión
. punto
! exclamaciónVamos a ver un ejemplo:
\*
\.
\`
\_El resultado será el siguiente:
Task list: nos permite realizar listados con una serie de tareas. Además, también podemos utilizar los iconos que hemos instalado con el plugin si vamos a la siguiente URL.
Vamos a ver un ejemplo:
# Task List
- [ ] Elemento no finalizado
- [x] Elemento finalizado# Task List + iconos
:white_check_mark: Elemento finalizado
:x: Elemento finalizado
El resultado será el siguiente:
Tablas de contenido (TOC): existe la posibilidad de crear una tabla de contenido. Vamos a ver un ejemplo partiendo del siguiente contenido:
# Introduccón a HTML
## ¿Cómo crear un documento HTML?Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim elit, ullamcorper eget ligula at, dictum laoreet tortor. Sed ornare tempor condimentum. Duis purus velit, rutrum quis feugiat dignissim, ultrices eu dolor. Phasellus pretium augue nisl, ut imperdiet mi scelerisque vitae. Maecenas ac tempor enim, sit amet sollicitudin nisi. Sed sollicitudin accumsan tincidunt. Nunc fermentum ullamcorper orci, id malesuada ligula feugiat in. Pellentesque molestie nisi odio, et vehicula dolor facilisis eu. Duis viverra vestibulum sem, ut pulvinar tortor dignissim a. Nam euismod dui in sem luctus, ut laoreet eros condimentum. Nullam aliquam est sed erat ultrices, vel semper erat tempor. Vivamus nisi sem, sagittis sed ante mollis, tincidunt sollicitudin ipsum. Suspendisse dignissim ac dui sed iaculis. Nam pellentesque porta rutrum. Mauris elit dui, semper sit amet turpis eu, rutrum pharetra enim. Nullam vel tincidunt dui, nec vestibulum nisl.Phasellus nec libero nisi. Phasellus dignissim quam ac nunc pharetra vehicula. Curabitur vel gravida tortor. In mauris est, cursus nec aliquet sit amet, scelerisque gravida sem. Proin pharetra vitae ex a laoreet. Morbi vitae dictum nulla. Nam fringilla consectetur sapien eu suscipit. Vivamus et ipsum ac augue ullamcorper pulvinar efficitur vitae tortor. Donec efficitur tortor non justo dapibus, luctus mattis est suscipit. Fusce scelerisque mauris sit amet fermentum hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer in risus maximus, commodo turpis vel, tincidunt elit.## Elementos en línea VS elementos en bloquePhasellus nec libero nisi. Phasellus dignissim quam ac nunc pharetra vehicula. Curabitur vel gravida tortor. In mauris est, cursus nec aliquet sit amet, scelerisque gravida sem. Proin pharetra vitae ex a laoreet. Morbi vitae dictum nulla. Nam fringilla consectetur sapien eu suscipit. Vivamus et ipsum ac augue ullamcorper pulvinar efficitur vitae tortor. Donec efficitur tortor non justo dapibus, luctus mattis est suscipit. Fusce scelerisque mauris sit amet fermentum hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer in risus maximus, commodo turpis vel, tincidunt elit.
Vamos a utilizar un plugin Markdown All in One para automatizar la creación de la tabla de contenidos para ello realizamos lo siguiente:
El resultado será el siguiente:
Tablas: a parte de las tabla de contenido que acabamos de ver también podemos realizar tablas sin que estás seas de contenido. Vamos a ver un ejemplo:
|Header |Column 1 | Column 2 | Column 3 ||:--- |:---- |:----:| ----:||1. Row| is | is | is ||2. Row| left | nicely | right ||3. Row| aligned | centered | aligned |
El resultado será el siguiente:
Mensajes de advertencia: existe además la posibilidad de realizar unos “mensajes de advertencia” mediante a las tablas. Vamos a ver un ejemplo:
| :exclamation: This is very important |
|-----------------------------------------|| :zap: Ignore at your own risk! |
|-----------------------------------------|| :warning: WARNING |
|:---------------------------|
| I should warn you ... || :boom: DANGER |
|:---------------------------|
| Will explode when clicked! |
El resultado será el siguiente:
Ejercicios de Markdown
Bueno, ahora si, que ya podemos decir que somos “expertos en Markdown”:
Así que comenzamos con los ejercicios:
Ejercicio 01📋: crea un repositorio en el que tendrás que realizar un documento de MarkDown (readme.md) y resume todo lo que hemos visto en el primer tema. Puedes añadir el formato que creas, añadir imágenes, títulos, tablas…
Ejercicio 02📋: crea otro repositorio llamado markdown-CV y haz tu propio CV (si no queréis poner vuestros datos os lo podéis inventar). Aunque, más tarde, pasaremos dicho CV a HTML por lo que os irá bien tener la información ya preparada.
Explicando el proceso de conversión
El proceso visto de forma muy resumida de conversión de un Markdown es el siguiente:
- Crear un archivo Markdown. El archivo debe tener una extensión .md o .markdown.
- Abrir el archivo Markdown en una aplicación Markdown y editarlo.
- Utilizar una aplicación Markdown que realice la conversión. Transformando el fichero de Markdown en un documento HTML.
- Visualiza el archivo HTML en un navegador web o convierte el fichero en otro formato de archivo, como PDF.
Recursos adicionales
Si queréis ampliar conocimientos al respecto os comparto un par de webs que son bastante interesantes:
- https://commonmark.org/
- https://lab.github.com/githubtraining/communicating-using-markdown repios
- La guía oficial del creador de Markdown.
