Aprendiendo a escribir Markdown
Pensemos en Markdown como una abstracción de HTML que básicamente permite escribir elementos HTML con un par de caracteres. Vamos al código.
Headers
# Este texto tendrá el formato de un elemento <h1>
## Este es equivalente a un <h2>
### Adivinaste, este representa un <h3>
...
###### Así es, si ponemos 6 'numerales' o 'alhomadillas' obtenemos el equivalente al estilo de un elemento <h6>
Estilos de texto
Cursiva
Si ponemos un _ o un * al principio y al final de una palabra o frase, se aplicará un elemento <i>
_Texto en cursiva_
*cursiva*
Tengamos en cuenta que la práctica más común es usar los guiones bajos (_) para representar cursiva, el asterisco (*) se suele usar para escribir texto en negrita/negrilla.
Negrilla
Si ponemos dos _ o dos * al principio y al final de una palabra o frase, se aplicará un elemento <b>
__Un texto que está en negrilla__
**negrita**
Como ya sabemos, por el aparte anterior, lo mejor es limitarnos a usar * para negrillas y dejar _ para la letra itálica,
Tal y como habrán notado, lo importante en este par de estilos es la cantidad de elementos y no el símbolo que se use, pues son permutables. Si miran en detalle, notarán que el símbolo que usemos para representar el elemento de lista no afecta la presentación, la decoración depende de la anidación. Lo mejor es usar un sólo símbolo para representar listas no ordenadas.
Enlaces / links
Podemos definir el link inmediatamente:
[Un link, enlace, ancla o anchor...](https://unjavascripter.github.io)
Un link, enlace, ancla o anchor…
O crear una variable y definir su valor en otro punto del documento:
[Un link, enlace, ancla o anchor...](blogDeJavaScript)
...
[blogDeJavaScript]: https://unjavascripter.github.io
Un link, enlace, ancla o anchor…
Y como ven, tenemos el mismo resultado. El segundo caso es especialmente útil cuando tenemos varios enlaces apuntando a la misma url.
Imágenes
Partimos de un link y agregamos un ! al principio:
El texto dentro de [] será el que se mostrará si la imagen no está disponible:
Quotes
> Hodor!
> - Hodor
Código
Una línea
`let obj = "obejota";`
Múltiples líneas
```
let obj = "obejota";
const e = e => e;
let x = 123;
```
Lenguaje
Podemos especificar el lenguaje del código que estamos escribiendo para obtener color highlighting
```js
let obj = "obejota";
const e = e => e;
let x = 123;
```
o
```css
body {
color: #666;
}
```
Se vería así:
let obj = "obejota";
const e = e => e;
let x = 123;
body {
color: #666;
}
Tablas
La primera línea representa los encabezados para cada columna, separados entre sí con |.
La segunda línea establece la separación entre encabezado y contenido. Cada segmento debe tener al menos 3 guiones ---. Los dos puntos : indican hacia donde debe alinearse el texto:
- Izquierda
:--- - Derecha
---: - Centrado
:---:.
Desde la tercera línea va el contenido.
Encabezado | Otro | Otro más
---: | ---: | :---:
Cosa 1 | valor x | valor s
Cosa 2 | valor z | valor a
| Encabezado | Otro | Otro más |
|---|---|---|
| Cosa 1 | valor x | valor s |
| Cosa 2 | valor z | valor a |
Eso es todo por ahora ¿Comentarios?