Markdown - lenguaje de marcado ligero
1. ¿Qué es Markdown y para que sirve?
Markdown es un lenguaje de marcado ligero creado para permitir la escritura y formato de texto sencillo y fácil de leer en la web.
Una de las ventajas de Markdown es que soporta todo que tiene HTML. En Markdown puedo escribir a la vez con sintaxis Markdown y HTML.
Texto escribe sin etiquetas y mas facil aprender que en HTML.
2. Syntaxis basico del Markdown
2.1. Uso de texto en negrita y cursivo
Para indicar a Markdown que quiero que texto sea en negrita o cursivo hay que usar simbolo estrella «*».
Hay dos opciones para indicar o usando simbolo «*» o simbolo «_». Es posible usar a la vez dos simbolos. Mas comodo usar estrella para distingir mas fácil cantidad de simbolos. Adelante explicaré sobre eso mas detallado.
Hay tres tipos:
-
Cursiva
-
Negrita
-
Negrita y cursiva
| Tipo | Sintaxis |
|---|---|
| Cursiva | *texto* |
| Negrita | **texto** |
| Negrita y cursiva | ***texto*** |
2.2. Parrafos
Los parrafos se ponen con simbolo «#», dependiendo de cantidad de simbolos, parrafo va a estar diferentes tamaños.
Asi se ve en código:
1
2
3
4
5
6
7
8
9
10
11
# 1 simbol
## 2 simbolos
### 3 simbolos
#### 4 simbolos
##### 5 simbolos
###### 6 simbolos
2.3. Enlaces
2.3.1. Enlaces básicos
Sintaxis es simple, enlace entre simbolo menor y mayor:
1
<httsp://arteza.es>
2.3.2. Enlaces en texto
Aqui puede ver sintaxis:
1
[Texto para convertirlo en enlace](Enlace al página web)
¡Visita mejor página del mundo!
2.3.3. Enlaces de referencia
En esos enlaces usamos unos variables para indicar enlace al página web y hay que usar sintaxis un poco diferente.
Los enlaces básicos usan esto [Texto](Enlace) y enlaces de referencia usan esto [Texto][Variable]. Se cambia los paréntesis a corchetes.
Una variable es una palabra o conjunto de letras que representa un dato específico. En lugar de escribir ese dato cada vez que se necesita, basta con usar el nombre de la variable. Además, si se cambia el valor de la variable, ese cambio se aplica automáticamente en todos los lugares donde se utiliza.
Aqui gasto mucho tiempo cada dia.
Una buena página para practicarse en Markdown.
Aqui como está en código:
1
2
3
4
5
6
[Aqui gasto mucho tiempo cada dia.][Enlace al youtube]
[Una buena página para practicarse en **Markdown**.][buena-practica]
[Enlace al youtube]: https://www.youtube.com
[buena-practica]: https://www.markdowntutorial.com
Una mala cosa que Markdown básico no soporta enlaces que abren nueva pestaña. Y por eso hay que usar un html, o hay que usar una versión amplia como Kramdown
Asi como hacer un enlace que abrirá en pestaña nueva:
1
<a href="https://google.com" target="_blank">Google</a>
2.3.4. Títulos
A los enlaces puedo añadir un título. Es decir cuando ratón esta sobre enlace aparezca una placa con título escrito.
En sintaxis básico hay que añadir comillas dobles despues de enlase:
1
[texto](Enlace "Título")
Ejempo:
1
[YouTube](https://www.youtube.com "Mejor plataforma para video")
2.4. Imágenes
2.4.1. Imágen básico
Síntaxix casi mismo que con enlaces, diferencia solo en un símbolo «!».
Aqui puede ver sintaxis:
1
2
_Texto opcional abajo del imágen_
Ejemplo:
1
2
_Orbea Onna_
Orbea Onna 2023
Tambien es posible usar variables. Mismo como con enlaces pero con simbolo «!» al principio para indicar que es una imágen.
2.4.2. Imágen como enlace
Sintaxis es siguiente:
1
[](Enlace)
Aquí hay parte interna, es imagen, y arriba de imagen hay parte de enlace.
Ejemplo:
2.5. Citas
Citas permiten hacer una llamada de atención.
Sintáxis en muy basico solo un símbolo mayor «>» al principio del texto.
Un texto muy importante a cual hay que dar una atención.
Y tambian es posible escribir con varias filas.
Al final Artem ha entrado en casa. Y pregunta al Pedro:
—¿Qué estas haciendo? — preguntó Artem.
1
2
3
> Al final Artem ha entrado en casa. Y pregunta al Pedro:
>
> —¿Qué estas haciendo? — preguntó Artem.
Y tambien es posible hacer sub-citas:
Al final Artem ha entrado en casa. Y preguntó al Pedro:
Intentando distinguir Pedro en salón oscuro.
—¿Qué estas haciendo? — preguntó Artem.
1
2
3
4
5
> Al final Artem ha entrado en casa. Y preguntó al Pedro:
>
>> Intentando distinguir Pedro en salón oscuro.
>
> —¿Qué estas haciendo? — preguntó Artem.
2.6. Listas
Hay dos tipos de listas:
- Numeradas
- Desordenadas
2.6.1. Numerada
Para hacer una lista numerada hay que escribir un número al principio del fila y poner un punto despues de este número.
Orden puede ser cualquier: desordenado, ordenado, mismo número. Importante que empieza por un número.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Cuatro objeto
Aqui tengo lista. Y para obtenerla puedo escribir de tres formas diferentes.
1
2
3
4
1. Primer objeto
2. Segundo objeto
3. Tercero objeto
4. Cuatro objeto
1
2
3
4
1. Primer objeto
1. Segundo objeto
1. Tercero objeto
1. Cuatro objeto
1
2
3
4
1. Primer objeto
8. Segundo objeto
3. Tercero objeto
5. Cuatro objeto
Tambien hay posibilidad hacer lista “interna” usando tabulador.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
- Cuatro objeto
1
2
3
4
5
6
1. Primer objeto
1. Segundo objeto
1. Tercero objeto
1. Tercero sub-objeto
1. Tercero sub-objeto
1. Cuatro objeto
2.6.2. Desordenada
Para hacer una lista desordenada hay que escribir símbolo al principio del fila.
Aqui están los símbolos:
| Simbolo | Nombre |
|---|---|
| * | estrella |
| + | mas |
| - | menos |
No se recomienda utilizar varios simbolos en misma lista.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Cuatro objeto
1
2
3
4
- Primer objeto
- Segundo objeto
- Tercero objeto
- Cuatro objeto
Tambien hay posibilidad hacer lista “interna” usando tabulador.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
- Cuatro objeto
1
2
3
4
5
6
- Primer objeto
- Segundo objeto
- Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
- Cuatro objeto
2.6.3. Lista ordenada y desordenada a la vez
Desordenada como principal y ordenada como secundaria.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
- Cuatro objeto
1
2
3
4
5
6
- Primer objeto
- Segundo objeto
- Tercero objeto
1. Tercero sub-objeto
1. Tercero sub-objeto
- Cuatro objeto
Ordenada como principal y desordenada como secundaria.
- Primer objeto
- Segundo objeto
- Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
- Cuatro objeto
1
2
3
4
5
6
1. Primer objeto
1. Segundo objeto
1. Tercero objeto
- Tercero sub-objeto
- Tercero sub-objeto
1. Cuatro objeto
2.7. Saltos duros y suaves. (Hard and soft)
Hay saltos de dos tipos:
| Tipo | Descripción |
|---|---|
| Hard | Es salto grande que desconecta párrafos visualmente |
| Soft | Es salto pequeño que guarda continuidad del texto |
2.7.1. Salto duro
Para hacer un salto duro hay que hacer dos saltos de línea en código.
Hola es un texto.
Que ayuda a entender
diferencia.
1
2
3
4
5
Hola es un texto.
Que ayuda a entender
diferencia.
2.7.2. Salto suave
Para hacer un salto suave hay que hacer dos espacios despues del texto.
Hola es un texto.
Que ayuda a entender
diferencia.
He cambiado espacios a puntos « · » para dar posibilidad ver estos espacios.
1
2
3
Hola es un texto.··
Que ayuda a entender··
diferencia.
2.7.3. Comparación de los saltos
Primeros saltos son duros y segundos son suaves
Hola es un texto.
Que ayuda a entender
diferencia.
Hola es un texto.
Que ayuda a entender
diferencia.
2.8. Código
2.8.1. Trozo de código
Sirve para marcar un trozo de código, para que lo no ejecutará.
Sintaxis es este:
1
`Código`
2.8.2. Bloques de código
Markdown permite escribir trozos de código sin uso de este código. Es decir que va a mostrar como texto plano, sin pasarlo como un código.
Sintaxias es siguiente:
```
Código
```
En esta página uso Kramdown.
Kramdown es Markdown pero con funciones añadidas.
Y Kramdown mustra este trozo así:
1
Código
Hay una función buena que permite marcar sintaxis del idioma seleccionada.
```Lenguaje-necesaria
Código
```
Todos lenguajes permitidos en Markdown.
Y Kramdown mustra este trozo en lenguaje «CSS» así:
1
2
3
4
5
6
7
8
9
10
11
12
13
.principal {
font-size: 20px;
}
#link-playa {
text-decoration: none;
color: red;
}
p {
color: white ;
}
2.9. Linea Horizontal
Para crear una linea horizontal hay que escribir tres veces cualquier de estos símbolos.
| Simbolo | Nombre |
|---|---|
| * | estrella |
| - | menos |
| _ | guion bajo |
Exemplo:
1
***
2.10. Caracter de escape
Para proteger un símbolo que se utiliza habitualmente para diferentes formatos, es necesario colocar una barra invertida «\» delante del símbolo para que se muestre como texto plano y no cambie nada.
Ejemplo:
-
- es una estrella
* - es una estrella
Primera fila sin barra invertida y segunda si.
1
2
3
* - es una estrella
\* - es una estrella
3. Syntaxis extendido del Markdown.
3.1. Tablas
Sintaxis es siguiente:
1
2
3
4
| Titulo1 | Titulo2 |
| ------- | ------- |-> esta fila sirve para alinear texto a la izquierda, centro, derecha
|Datos1|Datos2|
|Datos1.1|Datos2.1|
Y tambian puede ser así:
1
2
3
4
| Titulo1 | Titulo2 |
| -------- | -------- |
| Datos1 | Datos2 |
| Datos1.1 | Datos2.1 |
Ejemplo:
| Redes Sociales | Popularidad |
|---|---|
| 5/5⭐ | |
| 3/5⭐ | |
| 4/5⭐ |
1
2
3
4
5
| Redes Sociales | Popularidad |
| -------------- | ----------- |
| Instagram | 5/5⭐ |
| Facebook | 3/5⭐ |
| Twitter | 4/5⭐ |
Para cambiar alineación hay que poner dos puntos «:» al principio o al final o en ambos lados del guion en segunda fila de la tabla, justo despues del títulos.
| Tipo | Sintaxis |
|---|---|
| Izquierda | :- |
| Derecha | -: |
| Centro | :-: |
1
2
3
4
| Titulo1 | Titulo2 |
| ------- | ------- | |> esta fila sirve para alinear texto a la izquierda, centro, derecha
|Datos1|Datos2|
|Datos1.1|Datos2.1|
Ejemplo:
| A la Izquierda | Centrado | A la derecha |
|---|---|---|
| Datos1 | Datos2 | Datos3 |
| Datos1.1 | Datos2.1 | Datos3.1 |
1
2
3
4
| A la Izquierda | Centrado | A la derecha |
| :------------- | :------: | -----------: |
| Datos1 | Datos2 | Datos3 |
| Datos1.1 | Datos2.1 | Datos3.1 |
3.2. Lista de tareas
Sirve para crear una lista con casillas antes del una tarea.
Sintaxis es simple, porque es visualmente entendible.
1
2
3
4
5
- [ ] Tarea sin casilla marcada
- [x] Tarea con casilla marcada
Ejemplo:
- Hay que terminar explicación sobre Markdown.
- Crear un post sobre Kramdown.
- Instalar docker Diun.
1
2
3
- [x] Hay que terminar explicación sobre Markdown.
- [ ] Crear un post sobre Kramdown.
- [ ] Instalar docker Diun.
3.3. Emoji
Hay dos posibilidades como añadir emoji al markdown:
- Copiar y pegar emoji desde una página web al markdown
- Usar shortcodes
Para usar emoji de tipo shortcode solo hay que escribir un nombre corto entre dos puntos:
Ejemplo:
😄
1
:smile:
3.4. Texto tachado
Para hacer un texto tachado hay que escribir doble tilde «~» al principio y final del texto.
Sintaxis es siguiente:
1
~~Texto tachado~~
Ejemplo:
YouTube no es mejor plataforma.
1
YouTube ~~no~~ es mejor plataforma.
3.5. Texto marcado
Para marcar texto hay que escribir doble simbolo igual «=» al principio y final del texto.
Sintaxis es siguiente:
1
==Texto marcado==
Ejemplo:
Kramdown es lenguaje mejorado de Markdown. No estoy seguro de esto.
1
Kramdown es lenguaje mejorado de Markdown. ==No estoy seguro de esto.==
3.6. Subíndice
Para hacer subíndice hay que usar tilde simple «~» al principio y final del texto.
Sintaxis es siguiente:
1
H~2~O
H2O
3.7. Superíndice
Para hacer superíndice hay que usar acento circunflejo simple «^» al principio y final del texto.
Sintaxis es siguiente:
1
X^2^
X2
4. fichero de esta página
Si quiere ver como está escrita esta página web puede descargarla aqui.
En este fichero hay partes de código que no estaba explicado aqui mismo. Y en esta página uso Kramdown por eso el código puede tener diferencias por falta de soporte de algunos funciónes cuales hay en Markdown. De ellos son:
- Texto tachado
- Texto marcado
- Subíndice
- Superíndice
- etc
5. Enlaces que pueden ayudar a aprender Markdown
- Página web donde estudias y practicas al mismo tiempo. Hay en diferentes idiomas, en español tambien.
- Página web con documentación mas amplia. Hay solo en inglés.
- Página web donde puedes prácticarse en tiempor real y ver código HTML.
- Wikipedia
- Documentación GitLab sobre Markdown
- Documentacion Github sobre Markdown