Saltar al contenido principal

Guía Markdown

¿Qué es Markdown y para qué sirve?

Markdown es un lenguaje de marcado ligero que se puede usar para agregar elementos de formato a documentos de texto sin formato.

Markdown, creado por John Gruber en 2004, es ahora uno de los lenguajes de marcado más populares del mundo. Más sobre Markdown.


¿Por qué utilizar Markdown?

Tal vez te preguntes por qué las personas utilizan Markdown en lugar de algún editor WYSIWYG, es mucho más fácil presionar botones en una interfaz para formatear tu texto. Más sobre WYSIWYG

Resulta que existen varias razones por las cuales elegir Markdown.

  • Es sumamente amplio. Se puede utilizar para crear sitios web, documentos, notas, libros, presentaciones, mensajes de correo electrónico y documentación técnica.

  • Es portable. Los archivos que contienen texto con formato Markdown se pueden abrir utilizando prácticamente cualquier aplicación. Si no te gusta la aplicación Markdown que utilizas actualmente, puedes importar tus archivos Markdown a otra aplicación Markdown.

  • Completamente independiente de la plataforma. Puedes escribir texto con formato Markdown en cualquier dispositivo que ejecute cualquier sistema operativo.

  • Está listo para el futuro. Aún si la aplicación que actualmente estás utilizando deja de funcionar en algún momento en el futuro, podrás leer tu texto con formato Markdown utilizando una aplicación de edición de texto. Esto es sumamente importante cuando consideramos libros, tesis universitarias y otros documentos importantes que deben conservarse indefinidamente.


¿Cómo funciona Markdown?

Cuando escribimos en Markdown, el texto se guarda en un archivo de texto sin formato que tiene una extensión .md o .markdown. ¿Cómo se transforma entonces su archivo con formato Markdown a HTML?

La respuesta simple es que requiere de una aplicación Markdown capaz de procesar el archivo. Existen muchas aplicaciones disponibles, desde pequeños scripts hasta aplicaciones de escritorio que se parecen a Microsoft Word. Aunque tengan sus diferencias visuales, todas las aplicaciones realizan lo mismo.

Estas aplicaciones de Markdown utilizan un procesador Markdown también conocido como analizador o implementación el cual toma el texto con formato Markdown y lo envía a formato HTML. Es después de este proceso que su documento puede verse en un navegador web o combinarse con una hoja de estilo e imprimirse.

Ejemplo

Diagrama de los pasos que se realizan para transformar un archivo Markdown a uno HTML


Sintaxis

Acontinuación observaremos ejemplos de sintaxis básica y estructural, para profundizar así en este lenguaje de marcado.

Básica

ComponenteSintaxis
Encabezado# H1
## H2
### H3
Tipografía Negrita**Texto** or __texto__
Tipografía Itálica*texto* or _texto_
Citas en Bloque> Citas en bloque
Lista Numérica1. Primer Item
2. Segundo Item
3. Tercer Item
Lista no Ordenada- Primer Item
- Segundo Item
- Tercer Item
Linea Horizontal---
Enlaces[título](https://www.example.com)
Imagen![texto](image.jpg)
Salto de Líneatexto + doble espacio
Comentarios<!---Comentario--->

Puede obtener hasta 6 tamaños de títulos diferentes según el número de #


Estructural

Lista no Ordenada

Sintaxis
    - Primer Item
- Sub Item
- Segundo Item
- Tercer Item

Ejemplo:

  • Primer Item
    • Sub Item
  • Segundo Item
  • Tercer Item

Para más información visite Markdown Lista Desordenada.

Lista Ordenada

Sintaxis
    1. Primer Item
1. Sub Item
2. Segundo Item
3. Tercer Item

Ejemplo:

  1. Primer Item
    1. Sub Item
  2. Segundo Item
  3. Tercer Item

Para más información visite Markdown Lista Ordenada.

Tabla

Sintaxis
|Título Izquierda  | Título centro | Título Derecha |  
| :---- | :----: | ----: |
| Izquierda| Centro | Derecha |
| Izquierda | Centro | Derecha |

Ejemplo:

Título IzquierdaTítuloTítulo Derecha
IzquierdaCentroDerecha
IzquierdaCentroDerecha

Para más información visite Markdown Tablas.

Check List

Sintaxis
- [x] Primer opción
- [ ] Segunda opción
- [ ] Tercera opción

Ejemplo:

  • Primer opción
  • Segunda opción
  • Tercera opción

Para más información visite Markdown Lista de Tareas.

Salto de Línea

Sintaxis
Texto  <!---Espacio Espacio--->
Otro texto

Ejemplo:

Texto
Otro texto

Comentarios

Sintaxis
[comentario]: <> (Este es un comentario, no se incluirá)

[//]: <> (Esto también es un comentario)

[//]: # (Este puede ser el comentario más independiente de la plataforma) `

Otras Sintaxis

Enlaces

Sintaxis
[EOS Costa Rica](https://es.eoscostarica.io)

Ejemplo:
EOS Costa Rica


Imágenes

Sintaxis
![](https://raw.githubusercontent.com/eoscostarica/design-assets/master/logos/eosCR/fullColor-horizontal-transparent-white.png)

Ejemplo:

Como Markdown despliega la imagen de ejemplo


Videos

Sintaxis
<iframe 
width="100%"
height="350"
src="https://www.youtube.com/embed/tss1d0sow0o"
frameBorder="0"
allowFullScreen
loading="lazy"></iframe>

Ejemplo:


Citas en Bloque

Sintaxis
> Texto principal
>> Texto
>>
> * Item
> * Item
> Texto
> Texto final

Ejemplo:

Texto principal

Texto

  • Item
  • Item Texto Texto final

Líneas Horizontales

Sintaxis
---
***
- - - -

Ejemplo:






Código

Markdown

Syntax
    # Esto es código markdown

Javascript

Syntax
  var s = 'JavaScript sintaxis resaltada';
alert(s);

Phyton

Syntax
  s = "Python sintaxis resaltada"
print(s)

Function

Syntax
  function highlightMe() {
console.log('Esta línea puede ser resaltada!');
}

Para más información acerca de la sintaxis de Markdown, visitar esta página


Flavors de Markdown

El aspecto más confuso del uso de Markdown es que prácticamente todas las aplicaciones implementan una versión ligeramente distinta. Estas versiones se conocen normalmente como Flavors.

Para comprender el significado de Flavors en Markdown, podemos en ellos como dialectos del idioma. Las personas de Mexico hablan español al igual que las personas de Costa Rica, pero existen diferencias sustanciales entre los dialectos utilizados en ambos paises. Lo mismo sucede con los que utilizan diferentes aplicaciones de Markdown.

Por lo tanto, es nuestro trabajo dominar cualquier versión de Markdown que hayamos implementado en nuestra aplicación.

Más información sobre markdown.