Convertir Markdown a HTML

Convierte Markdown a HTML de forma online y gratuita directamente en tu navegador

Conversor de Markdown a HTML

Usa este conversor para transformar tu Markdown en HTML listo para copiar, previsualizar o descargar.

Cargando conversor...

HTML es el formato más natural al que convertir Markdown, ya que Markdown fue diseñado originalmente como una forma simplificada de escribir HTML. La conversión de Markdown a HTML es directa y no pierde información.

¿Por qué convertir Markdown a HTML?

Estas son las principales razones para convertir Markdown a HTML:

  • Publicar en la web: El HTML es el formato estándar para páginas web.
  • Insertar en CMS: Muchos gestores de contenido aceptan HTML directamente.
  • Correos electrónicos: Para crear emails con formato enriquecido.
  • Documentación: Para integrar en sistemas que requieren HTML.

Cómo convertir Markdown a HTML

Existen varias formas de convertir Markdown a HTML:

Herramientas online

Estas son algunas herramientas online para convertir Markdown a HTML:

  • Dillinger: Editor online que permite exportar a HTML.
  • StackEdit: Editor con vista previa y exportación a HTML.
  • Markdown to HTML: Convertidores online dedicados.

Librerías de programación

Si necesitas automatizar la conversión, puedes usar librerías como:

  • marked (JavaScript): Rápida y ligera.
  • markdown-it (JavaScript): Extensible y compatible con plugins.
  • Python-Markdown (Python): Con soporte para extensiones.
  • CommonMark (múltiples lenguajes): Implementación del estándar.

Línea de comandos

Puedes usar Pandoc para convertir desde la terminal:

pandoc archivo.md -o archivo.html

Ejemplo de conversión

El siguiente código Markdown:

# Título

Un párrafo con **negrita** y *cursiva*.

- Elemento 1
- Elemento 2

Se convierte en el siguiente HTML:

<h1>Título</h1>
<p>Un párrafo con <strong>negrita</strong> y <em>cursiva</em>.</p>
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Opciones avanzadas con Pandoc

El comando básico de Pandoc genera un fragmento de HTML. Si necesitas un documento HTML completo con <head>, <body> y metadatos, usa la opción --standalone:

pandoc archivo.md -o archivo.html --standalone

Aplicar una hoja de estilos CSS

Puedes vincular un archivo CSS personalizado para controlar la apariencia del HTML generado:

pandoc archivo.md -o archivo.html --standalone --css=estilo.css

Esto añade un <link rel="stylesheet" href="estilo.css"> en el <head> del documento. Puedes especificar varias hojas de estilo repitiendo el parámetro:

pandoc archivo.md -o archivo.html --standalone --css=reset.css --css=estilo.css

Usar una plantilla HTML personalizada

Si necesitas control total sobre la estructura del documento, puedes crear una plantilla HTML propia y pasarla a Pandoc:

pandoc archivo.md -o archivo.html --template=plantilla.html

Para generar la plantilla por defecto de Pandoc y usarla como punto de partida:

pandoc -D html > plantilla.html

Dentro de la plantilla puedes usar variables como $title$, $body$, $author$ y $date$, que se rellenan automáticamente desde los metadatos YAML del archivo Markdown:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>$title$</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <header>
    <h1>$title$</h1>
    <p>Por $author$ &mdash; $date$</p>
  </header>
  <main>
    $body$
  </main>
</body>
</html>

Otras opciones útiles

# Generar tabla de contenidos automática
pandoc archivo.md -o archivo.html --standalone --toc

# Resaltar código con un estilo concreto
pandoc archivo.md -o archivo.html --standalone --highlight-style=tango

# Incluir MathJax para fórmulas matemáticas
pandoc archivo.md -o archivo.html --standalone --mathjax

Convertir Markdown a HTML con Node.js

La librería marked es una de las más populares para convertir Markdown a HTML en JavaScript. Este es un ejemplo completo con opciones de configuración:

import { marked } from 'marked';

// Configurar las opciones de marked
marked.setOptions({
  gfm: true,         // Activar GitHub Flavored Markdown
  breaks: true,      // Convertir saltos de línea en <br>
  pedantic: false,    // No seguir la especificación original de Markdown al pie de la letra
});

const markdownText = `
# Mi documento

Un párrafo con **negrita** y un enlace a [Google](https://google.com).

## Lista de tareas

- [x] Tarea completada
- [ ] Tarea pendiente

## Código

\`\`\`javascript
console.log("Hola mundo");
\`\`\`

| Columna 1 | Columna 2 |
|-----------|-----------|
| Dato A    | Dato B    |
`;

const html = marked.parse(markdownText);
console.log(html);

Usar un renderer personalizado

Si necesitas modificar cómo se generan ciertos elementos HTML, puedes crear un renderer personalizado:

import { marked } from 'marked';

const renderer = new marked.Renderer();

// Hacer que todos los enlaces se abran en una pestaña nueva
renderer.link = function (href, title, text) {
  const titleAttr = title ? ` title="${title}"` : '';
  return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
};

// Añadir una clase CSS a las imágenes
renderer.image = function (href, title, text) {
  const titleAttr = title ? ` title="${title}"` : '';
  return `<img src="${href}" alt="${text}"${titleAttr} class="md-image" loading="lazy">`;
};

marked.setOptions({ renderer });

const html = marked.parse('Visita [mi sitio](https://ejemplo.com)');
// Resultado: <p>Visita <a href="https://ejemplo.com" target="_blank" rel="noopener noreferrer">mi sitio</a></p>

Alternativa con markdown-it

Otra librería muy popular es markdown-it, que destaca por su sistema de plugins:

import MarkdownIt from 'markdown-it';
import markdownItAnchor from 'markdown-it-anchor';
import markdownItToc from 'markdown-it-table-of-contents';

const md = new MarkdownIt({
  html: true,        // Permitir HTML dentro del Markdown
  linkify: true,     // Convertir URLs automáticamente en enlaces
  typographer: true, // Reemplazar comillas y guiones por versiones tipográficas
});

// Añadir plugins
md.use(markdownItAnchor);       // Añadir anclas a los encabezados
md.use(markdownItToc);          // Generar tabla de contenidos con [[toc]]

const resultado = md.render('# Título\n\nTexto con https://ejemplo.com automático');

Diferencias entre procesadores

No todos los procesadores de Markdown generan el mismo HTML. Existen varias especificaciones y extensiones que afectan al resultado final:

CommonMark

CommonMark es la especificación más estricta y precisa de Markdown. Define reglas claras para casos ambiguos que la especificación original de John Gruber dejaba sin resolver. Herramientas como markdown-it y cmark siguen esta especificación.

GitHub Flavored Markdown (GFM)

GFM es una extensión de CommonMark creada por GitHub. Añade soporte para:

  • Tablas: Usando | y - para crear filas y columnas.
  • Listas de tareas: Con - [x] y - [ ].
  • Tachado: Con ~~texto~~.
  • Autolinks: URLs y direcciones de correo se convierten automáticamente en enlaces.
  • Bloques de código con lenguaje: Con ```javascript para resaltado de sintaxis.

MultiMarkdown

MultiMarkdown añade funcionalidades avanzadas como:

  • Notas al pie con sintaxis extendida.
  • Tablas con celdas que abarcan varias columnas o filas.
  • Metadatos en la cabecera del documento.
  • Referencias cruzadas entre secciones del documento.
  • Definiciones y abreviaturas.

Ejemplo de diferencia práctica

Un mismo texto puede renderizarse de forma diferente según el procesador:

Línea 1
Línea 2

Así se comporta cada procesador:

  • CommonMark estricto: Las une en un solo párrafo (<p>Línea 1\nLínea 2</p>).
  • GFM con breaks: true: Las separa con un salto de línea (<p>Línea 1<br>Línea 2</p>).
  • Markdown original: Las une en un solo párrafo, necesitas dos espacios al final para forzar un <br>.

¿Cuál elegir?

ProcesadorMejor paraHerramientas
CommonMarkMáxima compatibilidad y consistenciamarkdown-it, cmark
GFMProyectos alojados en GitHubmarked (con gfm: true), github-markdown-css
MultiMarkdownDocumentos académicos y complejosMultiMarkdown CLI, Scrivener
Pandoc MarkdownMáxima flexibilidad y conversiónPandoc

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊