Para tomar notas en un equipo informático, muchos conocemos lo típico: Word o Writer de LibreOffice. Es una buena opción para algunos escenarios, pero si lo que queremos es tomar notas, hacerlo rápido, que tengan cierto formato y se abran con un visor no muy pesado, probablemente lo mejor sea usar lo que se conoce como Markdown. Aquí te vamos a explicar qué es, como se «marca» el texto y nombraremos algunos editores/visores que merecen la pena en Linux.
Markdown es un lenguaje de marcas ligero, cuyo objetivo es maximizar la legibilidad y facilidad de publicación, tanto en su forma de entrada como de salida. Como el HTML, Markdown muestra el texto de diferentes formas dependiendo de la marca que usemos en él, como por ejemplo negritas y cursivas. Fue creado por John Gruber y el fallecido Aaron Swartz, y sin entrar mucho más en su historia vamos a explicar cómo usarlo.
Cómo crear documentos de Markdown
Crear un documento de Markdown es algo que podemos hacer con cualquier editor de texto plano. Esto es igual en HTML, pero el Markdown es más fácil de escribir. HTML usa etiquetas de entrada y salida, y tienen en todos los casos símbolos menor que (<) y mayor que (>), lo que no es lo más cómodo para escribir, por lo menos en un teclado en español. Muchas de las marcas que usaremos en Markdown también tienen que ponerse delante y detrás de cada palabra, pero no es lo mismo usar dos asteriscos que los símbolos que usa el HTML. Lo único que hace falta, además de las marcas, es guardar el archivo con la extensión .md o .markdown.
Markdown no tiene tantas opciones como HTML, pero tampoco lo pretende. Hay algunas que podemos encontrar en Internet que podrían no estar soportadas por un visor de documentos compatible con Markdown, pero las más usadas sí lo están, y son estas:
Espacios en Markdown
No quisiera empezar o terminar el artículo sin este apartado. Y es que en algunas marcas, como las de encabezados o listas, hay que poner un espacio entre el símbolo y el texto. Puede que obtengamos el resultado esperado sin estos espacios, pero mejora la legibilidad y se considera una buena práctica.
Titulares de encabezado
En HTML son conocidos como h1-h6. Semánticamente, se tienen que usar como los componentes de un índice; no hay que usarlos para poner texto más grande o más pequeño. En teoría, el h1 sólo debe ser el titular de una página, los h2 forman parte del h1, los h3 son parte de un h2 y así sucesivamente. Por ejemplo, el «Cómo crear documentos de Markdown» de este artículo es un h2 que está dentro del artículo general con h1, y «Titulares de encabezado» y lo que seguirá serán h3 que forman parte del apartado de cómo se crean.
En HTML la etiqueta sería <h2>TEXTO</h2>, mientras que en Markdown es con dos almohadillas delante:
## Esto sería un h2
El número de almohadillas indica el número del encabezado, siendo el máximo el 6.
Negrita, cursiva, tachado y resaltado
Los textos en negrita (b o strong en HTML) y cursiva (i o em en HTML) se parecen mucho, tanto que puede llegar a confundir. Se puede poner texto en negrita rodeando el mismo con dos guiones bajos, y en cursiva con un guión bajo a cada lado. Por lo tanto, tres guiones bajos pondrían el texto en negrita y cursiva. Y exactamente lo mismo con los asteriscos.
Para no confundirnos, yo recomendaría usar un guión bajo para la cursiva y dos asteriscos para la negrita:
**negrita** _cursiva_
Puede que no se soporte en algunos visores, pero se puede tachar texto poniendo delante y detrás el bigote de la Ñ dos veces (~~) y resaltar como con un rotulador con dos símbolos de igual delante y detrás (==).
~~Tachado~~ ==Resaltado==
El del resaltado no lo veo en VSCode ni algunos visores de Linux, pero sí en las notas del navegador Vivaldi.
Si te estás preguntando cómo subrayar, no existe en Markdown, por raro que parezca. Si necesitas subrayar texto, lo mejor es que uses la etiqueta de HTML <u>texto subrayado</u>.
Potencia y subíndice
Si queremos poner un número elevado a otro, lo que es la potencia, se puede hacer poniendo el primer número, seguido del circunflejo (^) y luego la potencia: 2^4 mostraría 2⁴. Hay maneras de poner el número en la parte contraria (subíndice), pero como el texto marcado con rotulador, no es compatible con todos los procesadores. Se consigue con un bigote de la Ñ a cada lado del texto o número: h~2~o se ve h2o (si no se ve, imaginad que el 2 está más abajo).
Párrafos
Por lo general no hay que usar ninguna marca para los párrafos, pero sí que hay que saber un par de cosas. Tienen lo que se conoce como ruptura dura, y en un principio no se puede poner texto como el siguiente, lo que se vería en una poesía:
Un día de enero(espacio)(espacio) Parece un buen día(espacio)(espacio) Tremenda poesía(espacio)(espacio) Ha escrito el bloguero(espacio)(espacio)
En el texto anterior, Markdown lo pone todo seguido, pero el truco está en poner dos espacios al final de cada línea. De esta manera sí respeta lo que buscamos. Como alternativa, se puede añadir una barra invertida, y se recomienda si se quieren poner bloques de líneas con el mismo formato (negrita, cursiva…) con sólo dos simbolos al principio y dos al final de todo el bloque.
Listas
En HTML hay al menos tres tipos de listas, las ordenadas (con números delante), desordenadas (puntos delante) y de definiciones, ol, ul y dl en HTML respectivamente. En Markdown tenemos lo mismo, y se crearían así:
Listas desordenadas
Con un guión delante:
- Primer elemento - Segundo elemento - Tercer elemento
y también con un asterisco:
* Esto iría primero * Esto segundo * Y lo tercero
o símbolos de suma:
+ Primer punto + Segundo punto + Tercer punto
Si queremos crear una sublista, pondremos dos de los símbolos anteriores en vez de uno, tres para una sub-sublista y así sucesivamente.
- Comprar - - Leche - - Galletas
También se puede hacer con sangrado (varios espacios en blanco).
Listas ordenadas
Las listas ordenadas se crean poniendo un número seguido de un punto y luego el elemento:
1. Lo primero 2. Esto le sigue 3. Y esto después
O también con un paréntesis en vez del punto:
1) Elemento 1 2) Elemento 2
Para añadir sublistas, se tiene que añadir sangrado, dependiendo del nivel al que queramos llegar. Lo habitual son 4 espacios en blanco o lo que dé el tabulador (si al presionarlo desplaza el cursor a la derecha). En el siguiente ejemplo, Preparación e Instalación están a la izquierda del todo, mientras que los puntos intermedios están con cuatro espacios delante:
1. Preparación:
1. Se descarga la ISO.
2. Se graba en un USB.
2. Instalación:
1. Se introduce el USB en el equipo.
2. Se...
Se vería como:
- Preparación:
- Se descarga la ISO.
- Se graba en un USB.
- Instalación:
- Se introduce el USB en el equipo.
- Se..
A tener en cuenta que las listas ordenadas en Markdown siguen siempre un orden, nunca mejor dicho. Se puede crear con 1., 1., 1. y se verá 1., 2., 3.. Para romperlas hay que añadir texto entre medias con doble salto de línea. Y aún así, si luego se pone 2., seguirá con la cuenta.
Listas de datos
Las listas de datos son aquellas que a un término le sigue una definición, y se pueden crear así (no es compatible con muchos visores):
Término 1 : Definición 1 Término 2 : Definición 2a : Definición 2b
Lista de tareas
Se pueden crear listas de tareas con un símbolo de lista desordenada (‘-‘, ‘*’ o ‘+’), espacio y corchetes. Si están con un espacio en blanco, la tarea está por hacer; con una «x» dentro, está hecha:
- [ ] Crear artículo - [x] Felicitar año nuevo
Se vería como:
- Crear artículo
- Felicitar el año nuevo
Las listas se pueden combinar, y aquí ya entra la imaginación y necesidades de cada uno.
Enlaces en Markdown
Hay varias maneras de añadir enlaces en Markdown: el rápido o directo, el normal y por referencia. El rápido es añadir el enlace tal cual, con el protocolo incluido. Por ejemplo, https://linuxadictos.com se verá como un enlace al que se podrá hacer clic en la mayoría de visores compatibles con Markdown. Luego tenemos el normal de este tipo de lenguaje y por referencia.
El enlace normal se pone con el texto entre corchetes y el enlace y su title o tooltip (si existiera, entre comillas) entre paréntesis:
[El mejor blog de Linux](https://linuxadictos.com "O lo intentamos")
Los enlaces por referencia son un poco más complicados, pero pueden ser útiles porque, si necesitamos realizar cambios, modificando la referencia se modificarán todos los enlaces que la usen. La sintaxis es parecida, pero se pondrá el texto entre corchetes seguido de la referencia entre otros corchetes. Más adelante se indica la referencia. Mejor con un ejemplo que con mil palabras:
[El mejor blog de Linux][LXA] ... ... ... [LXA]: https://linuxadictos.com
Las referencias suelen ponerse al final del documento.
Si queremos que un enlace aparezca sin hipervínculo, podemos rodearlo de acentos graves o abiertos (`), que es un método de escape de los que hablaremos más adelante. Le dará un poco de formato, pero no enlazará a nada.
Enlaces a IDs
Markdown también permite crear enlaces a elementos con ID. La primera manera de hacerlo es de lo que más se comparte, pero a mí nunca me ha funcionado: debe añadirse {#el-id} a encabezados, detrás, y el enlace, en vez de una URL, debe incluir el ID. Por ejemplo [a imágenes](#imagenes) llevaría al siguiente punto si su Markdown fuera «## Imágenes en Markdown {#imágenes}».
Hay otras dos maneras de añadir enlaces a IDs:
- Enlaces a encabezados automáticos: algunos procesadores de texto, y algunos visores lo soportan, añaden el ID automáticamente. Si el encabezado es «Una prueba», el ID es lo mismo, pero todo en minúsculas y sustituyendo los espacios por guiones. La sintaxis debería ser:
[Texto que queramos que muestre](#una-prueba)
- Enlaces con ID de HTML: este método es añadiendo una etiqueta (como puede ser una «a», pero no es obligatorio) con el ID deseado, y sin ningún texto entre etiquetas de apertura y cierre para que sólo actúe como referencia (<a id=’una-prueba’></a>). El enlace sería exactamente igual que en el punto anterior.
Si lo que buscamos es volver arriba del documento, es suficiente con poner la almohadilla entre los paréntesis.
Un truco estético: si añadimos en alguna parte del código <style>* {scroll-behavior: smooth}</style>, veremos el desplazamiento; no dará un salto. Lo malo con esto es algo que explicaré más adelante: es probable que algunos visores muestren esa línea tal cual en vez de ocultarla.
Imágenes en Markdown
Si has entendido el punto anterior, este también lo entenderás. Se añaden imágenes casi igual que los enlaces, con la principal diferencia de que se pone el símbolo de exclamación delante. Por ejemplo:
De lo anterior:
- ! indica que es una imagen.
- [ ] contienen el texto alternativo, el atributo «alt» de HTML.
- ( ) contienen el enlace a la imagen, el atributo «src» de HTML.
- Entre comillas se puede poner el texto informativo, «title» en HTML. No es necesario.
Si queremos que la imagen lleve a otra página, lo que es una imagen con enlace, lo único que hay que hacer es rodear lo anterior entre corchetes y añadir detrás el enlace entre paréntesis.
[](https://duckduckgo.com)
Como en los hipervínculos, se pueden añadir los enlaces por referencia, pero en las referencias de las imágenes empiezan con el símbolo de exclamación.
Citas
Las citas en Markdown se crean empezando un párrafo con el símbolo de mayor qué, por ejemplo, Pablinux dijo:
> Pienso, luego... ¿Cuándo se come?
Mostraría:
Pienso, luego… ¿Cuándo se come?
Si necesitáramos anidar citas, se usarán más símbolos mayor qué.
> Cita original > > > Lo citado en la cita
Se vería como:
Cita original
Lo citado en la cita
Y si queremos que la cita incluya líneas en blanco, cada una de ellas debe incluir delante el símbolo, incluidas aquellas que están vacías:
> Frase ingeniosa primera > > Fin de la cita
mostraría:
Frase ingeniosa primera
Fin de la cita.
Código
El código se añade con una tabulación o cuatro espacios en blanco delante de él:
(tabulación)sudo pacman -Syu
Si se ponen tres acentos graves y detrás el nombre, algunos visores mostrarán el código con colores especiales, e incluso se mostrará el nombre del lenguaje en algún visor.
```python
def prueba():
hola
```
Mostraría algo así:
Lineas horizontales
Las líneas horizontales en Markdown se pueden crear dejando sólo 3 o más asteriscos (***), guiones (—) o guiones bajos (___) en una línea. El resultado es lo que sigue:
Tablas
Las tablas en Markdown se crean básicamente haciendo un dibujo de ellas:
|Primero|Segundo|Tercero| |:------|:------:|------:| |Primer campo|Segundo campo|Tercer campo| |Algo|Algo 2|Algo 3|
Mostrará (pero con otro formato):
| Primero | Segundo | Tercero |
|---|---|---|
| Primer campo | Segundo campo | Tercer campo |
| Algo | Algo 2 | Algo 3 |
Da lo mismo el tamaño que dejemos en las celdas; el lenguaje les dará formato. En la segunda fila, quizá la más importante, podemos indicar que el texto se alinee a la izquierda, centro o derecha. Los dos puntos (:) indican dónde va el texto, justo al contrario cuando queremos centrarlo, que debemos poner los dos puntos delante y detrás de la líneas.
Fórmulas matemáticas
Markdown también permite añadir fórmulas matemáticas. Por ejemplo, se puede incluir una ecuación en línea con el símbolo del dolar delante y detrás: $x2+y2=z^2$. También bloques con dos dólares:
$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
El resultado de lo anterior se ve en VSCode así (con un paréntesis delante de la segunda n, que se me pasó):
Escapar caracteres en Markdown
A veces puede ser necesario «escapar» algunos caracteres. Por ejemplo, si ponemos # al principio de una línea y luego un espacio, nos creará un h1. Podemos evitarlo poniendo la barra invertida delante, de esta manera:
\# Titular
Y así saldría tal cual, sin formato, y sin el símbolo de escape. Hay algunas maneras más, pero esta es la más usada y es la misma que usan otros lenguajes.
Markdown con HTML
Markdown soporta parcialmente las etiquetas de HTML y reglas CSS, pero yo no apostaría por esto. No todos los visores muestran las cosas igual, y es importante tener esto en cuenta. Por ejemplo, si usamos el Markdown de GitHub y queremos alinear una imagen, usando <img align="left"> conseguiremos que «flote» -flotar es que lo de abajo sube y se pone a su lado- a la izquierda. Se puede poner en el lado contrario usando right, pero la opción de centrar no funciona a no ser que se envuelva en una etiqueta de bloque como <p> o <div>.
Pero sí puede ser una opción. Si queremos poner un texto en rojo, se puede tirar de HTML y CSS, rodearlo con un contenedor tipo span y, en línea (dentro de la etiqueta), añadir las reglas CSS en el atributo «style». Puede venir bien, por ejemplo, si queremos controlar el tamaño de una imagen, pero lo dicho, no funciona siempre.
Cuándo NO usar Markdown
Markdown es lo que es, y se ha diseñado para crear contenido rápido y para un uso muy concreto. Puede servir para notas personales o como un preprocesador de HTML, pero no hay que usarlo si hay que trabajar en un grupo que no lo use. Lo más extendido es usar procesadores de texto, más concretamente Word y sus .docx, por lo que yo no usaría Markdown si tengo pensado compartir mis trabajos. Probablemente no sepan ni cómo visualizarlos, a no ser que le pasemos el enlace a un artículo como este 😉
Editores de Markdown para Linux
Este artículo se ha alargado más de lo esperado, y quizá merezca la pena dejar esto para otro post. A lo mejor sí sería buena idea mencionar algunos de pasada, como Joplin, Apostrophe o Visual Studio Code para el que quiera tenerlo todo en un mismo lugar. Como visores, algunos visores de documentos por defecto pueden mostrar su contenido.
Se elija lo que se elija, merece la pena usar Markdown para las notas personales. Probadlo y ya me diréis.
.barra {display: flex;justify-content: flex-end;height: 25px;background-color: #333;border-radius: 5px 5px 0 0;}.rojo, .naranja, .verde{width: 12px;height: 12px; position: relative;border-radius: 50%;top: 7px; margin: 0 3px;}.rojo{background-color: rgb(248, 82, 82); margin-right: 7px;}.naranja{background-color: rgb(252, 186, 63);}.verde{background-color: rgb(17, 187, 17);}.terminal{background-color: black !important;color: white !important;border-radius: 5px !important;}pre{font-family:monospace !important; padding: 0 10px 10px; line-height: 1.5em; overflow: auto; background-color: black !important; color: #0ee80e !important}
from Linux Adictos https://ift.tt/kp9nieT
via IFTTT
