📄
← Volver a guías

Cómo convertir Markdown a HTML: una guía completa

· Etiquetas: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Cómo convertir Markdown a HTML

Markdown está diseñado para escribir, pero la web funciona con HTML. Cada documento Markdown necesita convertirse a HTML antes de que un navegador pueda mostrarlo. Esta guía cubre los principales métodos para convertir Markdown a HTML.

Método 1: herramientas de línea de comandos

Pandoc

Pandoc es el convertidor de documentos universal que admite decenas de formatos.

# Basic conversion
pandoc input.md -o output.html

# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s

# With table of contents
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

Método 2: generadores de sitios estáticos

Jekyll

Jekyll impulsa GitHub Pages. Convierte archivos Markdown de _posts o colecciones en HTML.

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

Utiliza el procesador Kramdown con plantillas Liquid para el contenido dinámico.

Hugo

Hugo es un generador de sitios estáticos basado en Go, conocido por sus velocidades de compilación en milisegundos.

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

Utiliza Goldmark como su renderizador de Markdown predeterminado, con soporte para tablas, bloques de código delimitados y notas al pie.

Next.js (MDX)

Next.js admite MDX, que integra componentes de React dentro de Markdown.

npm install next @next/mdx @mdx-js/loader

MDX te permite incluir ejemplos de código en vivo, gráficos y formularios en la documentación.

Método 3: convertidor en línea

Para conversiones puntuales sin instalar herramientas, los convertidores basados en navegador ofrecen resultados inmediatos:

  1. Pega o escribe Markdown en el panel del editor.
  2. La salida HTML aparece en tiempo real.
  3. Copia el HTML generado para usarlo en cualquier página web o CMS.

La herramienta de vista previa de Markdown procesa GitHub Flavored Markdown — tablas, bloques de código, listas de tareas y tachado — completamente en tu navegador.

Método 4: complementos de editor

| Editor | Característica | Comando | |--------|----------------|---------| | VS Code | Vista previa integrada | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | Soporte integrado | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

El flujo de procesamiento

Cuando un generador de sitios estáticos convierte Markdown a HTML, sigue este flujo:

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

Si una característica no se renderiza como se espera, el problema suele estar en el analizador (no admite la sintaxis) o en el renderizador (produce HTML inesperado).

Convierte Markdown a HTML en línea

Usa la herramienta de vista previa de Markdown para convertir Markdown a HTML al instante. Escribe o pega Markdown en el editor, y la vista previa renderizada se actualiza en tiempo real.

Cómo convertir Markdown a HTML: una guía completa - CoolTool