Markdown es una herramienta de conversión de texto a HTML para escritores web.
- Lenguaje de marcado ligera diseñada para facilitar la redacción y la lectura de texto plano que se puede convertir a HTML o a otros formatos y tipos de archivo - PDF, .docx,...
- Proporciona la capacidad de controlar el formato del documento mediante un proceso sencillo y directo.
- Permite crear documentos estructurados con poca sintaxis, lo que facilita su comprensión.
Se puede considerar Markdown como un método de escritura que permite añadir formatos como negrita, cursivas o incluir enlaces, tablas o imágenes, utilizando simple texto plano.*
- Creada por John Gruber en 2004 en colaboración con Aaron Swartz.
- Desarrollada para que los textos sean fácilmente legibles y publicables en formato HTML.
- Publicada bajo la licencia BSD.
- Con el tiempo, Markdown fue creciendo en capacidades y variantes para adaptarse a la escritura de los más variados tipos de documentos.
- Su simplicidad y versatilidad la hicieron popular entre desarrolladores, blogueros e escritores de documentación técnica.
- Diversas extensiones y sabores permiten incluir funcionalidades avanzadas sin perder su sencillez original.
-
Sintaxis:
# Título 1,## Título 2,### Título 3, etc. -
Ejemplo:
# Título 1 ## Título 2 ### Título 3
- Los párrafos se crean con una o más líneas en blanco entre ellos.
- Saltos de línea con dos espacios al final de la línea.
- Negrita:
**texto**o__texto__ - Cursiva:
*texto*o_texto_ - Texto tachado:
~~texto~~
-
Listas no ordenadas:
-,*,+- Elemento 1 - Elemento 2
-
Listas ordenadas:
1.,2.1. Elemento 1 2. Elemento 2
-
Sintaxis:
> cita> Esta es una cita.
-
Sintaxis:
[texto](URL)[Google](https://www.google.com)
-
Sintaxis:
-
Código en línea:
`código` -
Bloques de código: Envuelve tu código entre comillas inversas. Permite indicar el lenguaje del código justo después de las tres primeras comillas inversas:
```javascript console.log('Esto es un bloque de código') ```
O resultado será este:
console.log('Esto es un bloque de código')-
Sintaxis básica:
| Cabecera 1 | Cabecera 2 | | ---------- | ---------- | | Celda 1 | Celda 2 | | Celda 3 | Celda 4 |
Con el tiempo Markdown ha crecido en capacidades e sabores para adaptarse a la escritura de os más variados tipos de documentos y permitiendo incluir características avanzadas sin perder su sencillez original.
- Un estándar moderno que define la sintaxis básica de Markdown de manera precisa y completa.
-
Usada en GitHub con extensiones como tablas, listas de tareas y menciones de usuarios.
- [x] Tarea completada - [ ] Tarea pendiente
- Extensión que añade funcionalidades adicionales como tablas, definiciones de listas y atributos en HTML.
- Añade características para publicaciones más avanzadas, como referencias cruzadas y notas al pie.
- Extensión del navegador que permite convertir texto Markdown a HTML en correos electrónicos.
- Muchos sistemas de gestión de contenidos (CMS) permiten usar Markdown para redactar contenido.
- Plataformas como Jekyll y Hugo permiten crear sitios web estáticos con Markdown.
- Ampliamente utilizado en documentación de proyectos de software, incluido repositorios de código en GitHub y GitLab.
- Herramientas como MkDocs y Sphinx permiten crear documentación en HTML a partir de archivos Markdown.
- Aplicaciones como Notion, Obsidian o Trello permiten usar Markdown para crear y organizar notas y tareas.
- Extensiones como MarkdownHere permiten escribir correos electrónicos en Markdown y convertirlos a HTML.
- Usar la misma sintaxis para negrita, cursiva, etc., a lo largo del documento.
- Mantener líneas cortas (menos de 80 caracteres) para facilitar la lectura en texto plano.
-
Insertar comentarios que no se renderizan usando el típico marcado HTML:
<!-- Este es un comentario -->
Markdown, a lo largo de los años, fue ampliado con varias extensiones y funcionalidades avanzadas que permiten añadir características específicas para diferentes necesidades, manteniendo la sencillez del lenguaje original. A continuación, se exploran algunas de las extensiones y funcionalidades más populares:
-
Características:
- Tablas, listas de tareas, menciones de usuarios, emoticonos y sombreado de sintaxis.
- Extensión usada principalmente en GitHub para README.md e wikis.
-
Ejemplo:
- [x] Tarea completada - [ ] Tarea pendente - @usuario mención
-
Características:
- Extensión que añade soportes para tablas, listas de definición, notas al pie, atributos en HTML y bloques de código resaltado.
-
Ejemplo:
| Columna1 | Columna2 | | -------- | -------- | | Celda1 | Celda2 | Término : Definición del término <div id="div-id" class="div-class"> Contenido HTML adicional </div>
-
Características:
- Añade características como referencias cruzadas, notas al pie, citas bibliográficas y matemáticas.
-
Ejemplo:
Esta es una referencia cruzada [Capítulo 1](#capitulo-1). Esta es una nota al pie [^1]. [^1]: Texto de la nota al pie.
-
Características:
- Extensión para navegadores que permite escribir correos electrónicos en Markdown y convertirlos a HTML al enviarlos.
-
Ejemplo:
Markdown en tu correo electrónico. `Markdown Here` convierte esto en HTML.
-
Características:
- Permite la inclusión de ecuaciones matemáticas complejas en documentos Markdown utilizando la sintaxis de LaTeX.
-
Ejemplo:
Fórmula en línea: \( E = mc^2 \) Fórmula en bloque: $$ E = mc^2 $$
-
Características:
- Herramienta para crear diagramas utilizando texto plano. Puede integrarse con Markdown para incluir diagramas directamente en los documentos.
-
Ejemplo:
```plantuml @startuml Alice -> Bob: Solicitud Bob --> Alice: Respuesta @enduml
-
Características:
- Similar a PlantUML, Mermaid permite la creación de diagramas de flujo, gráficos de Gantt, etc.
-
Ejemplo:
```mermaid graph TD; A-->B; A-->C; B-->D; C-->D;
-
Características:
- Permite el resaltado de sintaxis para múltiples lenguajes de programación en los bloques de código.
-
Ejemplo:
```python def ola_mundo(): print("Ola, Mundo!")
-
Características:
- Herramienta para generar automáticamente una tabla de contenidos a partir de los títulos de un documento Markdown.
-
Ejemplo:
<!-- TOC --> ## Sección 1 ## Sección 2
-
Características:
- Similar a MathJax, KaTeX es otra biblioteca de renderizado de matemáticas que permite la inclusión de ecuaciones.
-
Ejemplo:
Fórmula en bloque: $$ \int_a^b f(x)dx $$
-
Características:
- Herramienta de conversión de documentos que soporta Markdown y puede convertir entre múltiples formatos (HTML, PDF, DOCX, etc.).
-
Ejemplo:
pandoc documento.md -o documento.pdf
-
Características:
- Herramienta para crear sitios de documentación a partir de arquivos Markdown.
-
Ejemplo:
# Introdución Bienvenido a la documentación.
-
Características:
- Generadores de sitios estáticos que permiten crear blogs y sitios web utilizando Markdown para los contenidos.
-
Ejemplo:
--- title: "Entrada de Blog" date: 2024-05-30 --- # Bienvenido a mi blog
Estas extensiones y funcionalidades avanzadas permiten que Markdown sea una herramienta versátil y poderosa para la creación de documentos de diversos tipos, manteniendo la sencillez que le hizo tan popular.
- Ejemplos de
README.mdbien escritos y estructurados. - Uso de Markdown en wikis de proyectos.
- Muchos blogueros usan Markdown para redactar contenido.
- Editores en línea: Dillinger, StackEdit.
- Aplicaciones de escritorio: Typora, Visual Studio Code.
- Extensiones de navegador: Markdown Here.
- Plugins para Editores de Texto: Plugins de Markdown para Visual Studio Code, Sublime Text, Vim, etc.
- Existen múltiples herramientas para convertir Markdown a otros formatos.
- Crear un documento Markdown con títulos, parágrafos, listas, enlaces e imagenes.
- Crear tu CV con Markdown
- Crear una tabla con varias columnas y filas, incluyendo formatos de texto como negrita y cursiva.
- Publicar una entrada de blog usando una plataforma que soporte Markdown (por ejemplo, Jekyll o Hugo, o también Wordpress).
Los generadores de sitios estáticos (Static Site Generators, SSG) permiten crear sitios web rápidos y seguros al precompilar todos los archivos del sitio en un servidor, lo que elimina la necesidad de procesar el contenido dinámico en tiempo real. Markdown es ampliamente utilizado en estos generadores debido a su sencillez y capacidad para convertir texto plano en HTML de forma eficiente. Aquí tienes una visión general de los SSG más populares y como funcionan con Markdown:
Que es un Site Static Generator (SSG)?
- Un SSG es una herramienta que convierte archivos de contenido (normalmente escritos en Markdown) y plantillas en archivos HTML estáticos listos para ser servidos en un servidor web.
- Ventajas:
- Rendimiento: Los sitios estáticos cargan más rápido ya que no dependen de consultas a bases de datos o procesamiento en tiempo real.
- Seguridad: Menos puntos de vulnerabilidad ya que non hay backend dinámico.
- Fácil de mantener: Actualizaciones simplificadas y menos dependencias.
-
Características:
- Integración perfecta con GitHub Pages.
- Soporte para Markdown y Liquid (lenguaje de plantillas).
- Gran comunidad y multitud de plugins.
-
Ejemplo:
--- layout: post title: "Mi primer post" --- # Hola, mundo! Este es mi primer post en Jekyll.
-
Configuración básica:
gem install jekyll bundler jekyll new mi-sitio cd mi-sitio bundle exec jekyll serve
-
Características:
- Conocido por su velocidad en la compilación de sitios.
- Soporte para Markdown y lenguaje de plantillas Go.
- Extensa biblioteca de temas.
-
Ejemplo:
--- title: "Mi primer post" date: 2024-05-30 --- # Hola, mundo! Este es mi primer post en Hugo.
-
Configuración básica:
hugo new site mi-sitio cd mi-sitio hugo new posts/mi-primer-post.md hugo server
-
Características:
- Construido sobre React, permite componentes reutilizables.
- Soporte para Markdown a través de plugins como
gatsby-transformer-remark. - Enfoque moderno con GraphQL para consultas de datos.
-
Ejemplo:
--- title: "Mi primer post" date: "2024-05-30" --- # Hola, mundo! Este es mi primer post en Gatsby.
-
Configuración básica:
npx gatsby new mi-sitio cd mi-sitio npm install gatsby-transformer-remark gatsby develop
-
Características:
- Flexibilidad para usar múltiples lenguajes de plantillas.
- Soporte para Markdown.
- SSG ligero con configuración mínima.
-
Ejemplo:
--- title: "Mi primer post" date: 2024-05-30 --- # Hola, mundo! Este es mi primer post en Eleventy.
-
Configuración básica:
npx @11ty/eleventy eleventy --serve
- Carpetas y archivos básicos:
_posts/ocontent/: Contiene archivos Markdown para las entradas del blog._layouts/olayouts/: Plantillas HTML para el contenido.assets/ostatic/: Imágenes, CSS, JavaScript y otros archivos estáticos.config.ymloconfig.toml: Archivo de configuración do SSG.
-
Front Matter:
-
Metadatos incluidos al comienzo de los archivos Markdown para definir configuración específica del contenido.
-
Ejemplo:
--- title: "Mi primer post" date: 2024-05-30 tags: [introducción, ejemplo] ---
-
- Jekyll:
jekyll-paginatepara la paginación.jekyll-sitemappara generar sitemaps automáticamente.
- Hugo:
shortcodespara crear componentes reutilizables.hugo-algoliapara integración con Algolia Search.
- Gatsby:
gatsby-plugin-imagepara optimización de imágenes.gatsby-source-filesystempara fuentes de datos.
- Eleventy:
eleventy-plugin-syntaxhighlightpara resaltado de sintaxis.eleventy-plugin-rsspara fuentes RSS.
-
Tablas, listas de tareas, imágenes y enlaces:
-
Utilización de sintaxis específica para mejorar el contenido.
-
Ejemplo:
| Cabecera 1 | Cabecera 2 | | ---------- | ---------- | | Celda 1 | Celda 2 | - [x] Tarea completada - [ ] Tarea pendente 
-
- Jekyll: Documentación oficial
- Hugo: Documentación oficial
- Gatsby: Documentación oficial
- Eleventy: Documentación oficial
- Stack Overflow: Para resolver problemas y dudas.
- GitHub: Repositorios de Ejemplos e proyectos abiertos.
- Foros específicos: Discusiones en foros dedicados a cada SSG.
- Configurar un nuevo blog en GitHub Pages utilizando Jekyll.
- Crear entradas en Markdown y personalizar el tema.
- Configurar un nuevo sitio web con Hugo.
- Crear páginas de proyecto utilizando archivos Markdown.
- Configurar un sitio de documentación utilizando Gatsby.
- Integrar Markdown para las páginas de documentación y personalizar el estilo.
- Configurar un sitio web personal utilizando Eleventy.
- Crear entradas de blog e paginas en Markdown.
En el mundo del desarrollo y producción de contenidos web actual, Markdown juega un papel fundamental al proporcionar una manera sencilla y eficiente de crear y dar formato al contenido para sitios web. Su importancia radica en su capacidad para simplificar el proceso de escritura y publicación de contenido, al mismo tiempo que permite una gran flexibilidad y potencialidades avanzadas.
Markdown destaca por su sencillez y facilidad de uso. Su sintaxis minimalista permite crear documentos estructurados con facilidad, sin la necesidad de aprender un lenguaje de marcado complejo. Esto hace que sea accesible para personas de todos los niveles de habilidad técnica.
Otra ventaja importante de Markdown es su compatibilidad y portabilidad. Los documentos Markdown pueden ser convertidos fácilmente a HTML, lo que permite que el contenido creado con Markdown sea utilizado en cualquier sitio web o plataforma que soporte HTML. Además, muchas herramientas y plataformas populares, como GitHub, GitLab, Jekyll o Hugo, son compatibles con Markdown, lo que hace que sea ampliamente adoptado en la comunidad de desarrollo web.
El uso de Markdown también puede mejorar la eficiencia y productividad de los equipos de desarrollo y producción de contenidos. Al eliminar la necesidad de formatos complejos y procesos de edición laboriosos, Markdown permite que los equipos se concentren más en la creación de contenido de calidad y menos en los detalles técnicos de su formato.
A pesar de su sencillez, Markdown también ofrece una gran flexibilidad y potencialidades avanzadas. A través de extensiones y funcionalidades adicionales, como GitHub Flavored Markdown (GFM), Markdown Extra y MultiMarkdown, es posible incluir características avanzadas, como tablas, listas de tareas, menciones de usuarios, ecuaciones matemáticas y diagramas, sin perder la sencillez original del lenguaje.
En resumen, Markdown es una herramienta poderosa y versátil que desempeña un papel crucial en el desarrollo y producción de contenidos web actual. Su sencillez, compatibilidad, eficiencia, flexibilidad y potencialidades avanzadas hacen de el una elección ideal para quien busca una manera fácil y eficaz de crear y dar formato al contenido para la web. Al adoptar Markdown como práctica recomendada, los equipos de desarrollo y producción de contenidos pueden mejorar su eficiencia y productividad, al mismo tiempo que ofrecen una mejor experiencia de usuario en sus sitios web.
Desarrollo de aplicaciones con tecnologías web
COIRO 2024