DecoToolkit Logo

Convertidor de Markdown a HTML

Pega o escribe Markdown a la izquierda y ve el HTML renderizado a la derecha — en vivo, en tu navegador. Soporta GitHub Flavoured Markdown completo: tablas, listas de tareas, tachado, bloques de código, imágenes y enlaces. Copia el HTML o descarga un archivo .html completo.

Link copied to clipboard

Markdown

Markdown to HTML Converter

Convert GitHub Flavoured Markdown to HTML instantly — no server, no sign-up.

Features

  • Supports italic, bold, and strikethrough
  • Fenced code blocks with language hints
  • Tables, task lists, and blockquotes

Code Example

function greet(name) {
  return `Hello, ${name}!`;
}

Task List

  • Paste your Markdown
  • See the rendered Preview
  • Copy or download the HTML

Table

Format Example Output
Bold **text** text
Italic _text_ text
Strike ~~text~~ text

Switch to HTML Source to see the generated markup.

Prueba un Ejemplo Rápido

Haz clic en cualquier ejemplo para cargarlo en el editor.

Cómo usar esta herramienta

  1. Pega tu Markdown en el editor de la izquierda o escribe directamente. El panel derecho se actualiza en tiempo real.
  2. El panel derecho muestra una Vista Previa renderizada por defecto — encabezados con formato, texto en negrita, listas, tablas y bloques de código.
  3. Haz clic en 'Código HTML' en el panel derecho para cambiar de la vista previa al código HTML sin procesar.
  4. Haz clic en 'Copiar HTML' para copiar el HTML generado al portapapeles.
  5. Haz clic en 'Descargar .html' para guardar un documento HTML completo e independiente en tu dispositivo.
  6. Usa 'Prueba un Ejemplo Rápido' debajo del editor para cargar una plantilla — README, entrada de blog, changelog, página de documentación, FAQ o tabla comparativa.
  7. Limpia el editor con el ícono de papelera y empieza de cero, o carga otro ejemplo.
  8. Pega el HTML copiado en tu CMS, plataforma de blog, sistema de documentación, plantilla de correo o cualquier herramienta que acepte HTML.

¿Por qué usar nuestro Convertidor de Markdown a HTML?

Markdown es el formato de escritura estándar para archivos README, documentación, changelogs y contenido de CMS — pero la mayoría de los destinos de publicación requieren HTML. Este convertidor salva esa brecha al instante, ejecutándose completamente en tu navegador sin llamadas al servidor. Tu texto permanece privado, la conversión es inmediata y el resultado es HTML limpio y compatible con estándares que puedes usar en cualquier lugar.

Guía de Sintaxis Markdown

Una referencia completa de la sintaxis Markdown — entrada Markdown a la izquierda, salida HTML a la derecha.

Encabezados
Markdown
# Heading 1
## Heading 2
### Heading 3
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Usa # para H1, ## para H2, ### para H3, hasta ###### para H6.

Negrita
Markdown
**Bold text**
__Also bold__
HTML
<strong>Bold text</strong>
<strong>Also bold</strong>

Envuelve el texto en **dobles asteriscos** o __dobles guiones bajos__.

Cursiva
Markdown
*Italic text*
_Also italic_
HTML
<em>Italic text</em>
<em>Also italic</em>

Envuelve el texto en *asterisco simple* o _guion bajo simple_.

Negrita y Cursiva
Markdown
***Bold and italic***
HTML
<strong><em>Bold and italic</em></strong>

Usa ***triples asteriscos*** para negrita y cursiva juntos.

Tachado
Markdown
~~Struck through~~
HTML
<del>Struck through</del>

Envuelve el texto en ~~dobles tildes~~ — solo GitHub Flavored Markdown.

Código en Línea
Markdown
Use `console.log()` here.
HTML
Use <code>console.log()</code> here.

Envuelve el texto en `acentos graves` para código en línea.

Bloque de Código
Markdown
```javascript
const x = 42;
console.log(x);
```
HTML
<pre><code class="language-javascript">
const x = 42;
console.log(x);
</code></pre>

Usa cercas de acentos graves triples. Añade un nombre de idioma para sugerencias de sintaxis.

Cita en Bloque
Markdown
> This is a blockquote.
> It can span multiple lines.
HTML
<blockquote>
<p>This is a blockquote.
It can span multiple lines.</p>
</blockquote>

Prefija una línea con > para crear una cita en bloque.

Lista Ordenada
Markdown
1. First item
2. Second item
3. Third item
HTML
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Inicia líneas con números seguidos de un punto. Los números se corrigen automáticamente.

Lista No Ordenada
Markdown
- Apple
- Banana
- Cherry
HTML
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Usa -, + o * para crear viñetas.

Lista Anidada
Markdown
- Parent item
  - Child item
  - Another child
HTML
<ul>
<li>Parent item
<ul>
<li>Child item</li>
<li>Another child</li>
</ul>
</li>
</ul>

Indenta con 2 o 4 espacios para crear sub-listas.

Lista de Tareas
Markdown
- [x] Completed task
- [ ] Pending task
HTML
<ul>
<li><input checked disabled type="checkbox"> Completed task</li>
<li><input disabled type="checkbox"> Pending task</li>
</ul>

Usa - [ ] para sin marcar y - [x] para marcado — solo GitHub Flavored Markdown.

Enlaces
Markdown
[Visit DecoToolkit](https://decotoolkit.com)
HTML
<a href="https://decotoolkit.com">Visit DecoToolkit</a>

Usa [texto del enlace](URL) — añade un título con [texto](URL "Título").

Imágenes
Markdown
![Alt text](https://example.com/image.png)
HTML
<img src="https://example.com/image.png" alt="Alt text">

Usa ![texto alternativo](URL) — igual que un enlace pero con el prefijo !.

Tablas
Markdown
| Name  | Role   |
|-------|--------|
| Alice | Dev    |
| Bob   | Design |
HTML
<table>
<thead><tr><th>Name</th><th>Role</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>Dev</td></tr>
<tr><td>Bob</td><td>Design</td></tr>
</tbody></table>

Usa barras verticales | y guiones --- para crear tablas. Usa dos puntos para alineación de columnas.

Línea Horizontal
Markdown
---
HTML
<hr>

Usa tres o más guiones (---), asteriscos (***) o guiones bajos (___) solos en una línea.

Escapar Caracteres
Markdown
\*not italic\*
HTML
<p>*not italic*</p>

Prefija cualquier carácter Markdown con \ para renderizarlo literalmente.

Características Markdown Compatibles

Este convertidor usa la biblioteca marked con GitHub Flavored Markdown (GFM) habilitado. Todas las características siguientes son totalmente compatibles.

✓Encabezados H1–H6
✓Párrafos y Saltos de Línea
✓Negrita y Cursiva
✓Negrita + Cursiva combinadas
✓Tachado (GFM)
✓Código en Línea
✓Bloques de Código Delimitados
✓Citas en Bloque
✓Listas Ordenadas
✓Listas No Ordenadas
✓Listas Anidadas
✓Listas de Tareas (GFM)
✓Enlaces
✓Imágenes
✓Tablas (GFM)
✓Líneas Horizontales
✓Paso de HTML sin procesar

Errores Comunes en Markdown

Evita estas trampas comunes al escribir Markdown.

Falta línea en blanco antes de una lista
❌ Incorrecto
Some text here
- Item one
- Item two
✅ Correcto
Some text here

- Item one
- Item two
Falta fila separadora en la tabla
❌ Incorrecto
| A | B |
| 1 | 2 |
✅ Correcto
| A | B |
|---|---|
| 1 | 2 |
Sintaxis de enlace incorrecta
❌ Incorrecto
[Click here]https://example.com
✅ Correcto
[Click here](https://example.com)
Cerca de código no cerrada
❌ Incorrecto
```
code here
(missing closing fence)
✅ Correcto
```
code here
```
Un solo salto de línea no crea un nuevo párrafo
❌ Incorrecto
First paragraph.
Second paragraph.
✅ Correcto
First paragraph.

Second paragraph.

¿Qué es Markdown?

Markdown es una sintaxis de formato de texto plano diseñada para ser legible tal como está y convertible a HTML. Creada por John Gruber y Aaron Swartz en 2004, usa caracteres de puntuación simples — como #, * y > — para indicar estructura y énfasis. Markdown es ahora el formato de escritura estándar para documentación técnica, proyectos de código abierto y plataformas de contenido orientadas a desarrolladores.

  • Archivos README en GitHub, GitLab y Bitbucket
  • Documentación generada por herramientas como MkDocs, Docusaurus y Jekyll
  • Entradas de blog en plataformas como Ghost, Hashnode y Dev.to
  • Notas en aplicaciones como Obsidian, Notion y Bear
  • Mensajes de chat en Slack, Discord y Microsoft Teams
  • Generadores de sitios estáticos incluyendo Hugo, Eleventy y Astro

Casos de Uso Comunes para un Convertidor de Markdown a HTML

Un convertidor de Markdown a HTML es útil cuando tienes contenido escrito en Markdown pero necesitas salida HTML. Aquí están los escenarios más comunes:

  • Publicar entradas de blog o artículos en un CMS que acepta HTML
  • Convertir un README del proyecto en una página de sitio de documentación
  • Generar plantillas de correo HTML a partir de borradores en Markdown
  • Exportar notas Markdown de aplicaciones como Obsidian o Typora a HTML
  • Incrustar contenido formateado en herramientas que solo soportan HTML (Mailchimp, HubSpot, etc.)
  • Crear fragmentos HTML para inclusión en sitios estáticos o aplicaciones de página única
  • Verificar qué HTML producirá un documento Markdown antes de desplegar

Mejores Prácticas al Escribir Markdown

Seguir convenciones consistentes de Markdown previene problemas de renderizado y mantiene tus documentos portátiles entre herramientas y plataformas.

  • Siempre añade una línea en blanco antes de una lista, bloque de código o cita
  • Prefiere encabezados ATX (# H1) sobre el estilo Setext — son más fáciles de escanear y están soportados en todas partes
  • Usa bloques de código delimitados (``` lang) en lugar de indentación de 4 espacios — más legibles y soportan sugerencias de idioma
  • Escapa caracteres especiales (*, _, [, ]) con una barra invertida cuando quieras que aparezcan literalmente
  • Mantén las columnas de tablas alineadas con espacios de relleno — no afecta la salida pero mejora la legibilidad
  • Usa URLs relativas para enlaces internos en proyectos de documentación
  • Prueba tu Markdown en la plataforma de destino además de un convertidor — existen pequeñas diferencias de renderizado entre parsers

Preguntas frecuentes

¿Qué es Markdown?

Markdown es un lenguaje de formato de texto simple creado por John Gruber en 2004. Usa caracteres de puntuación simples — como # para encabezados, **negrita** e *cursiva* — para indicar formato. La idea es que Markdown sea legible como texto plano y también se convierta limpiamente a HTML. Hoy se usa en archivos README de GitHub, sistemas de documentación, plataformas de blog, aplicaciones de notas y más.

¿Qué es HTML y cómo se relaciona con Markdown?

HTML (HyperText Markup Language) es el lenguaje estándar que los navegadores usan para renderizar páginas web. Markdown y HTML sirven el mismo propósito — texto estructurado y con formato — pero Markdown es más fácil de escribir y leer. Un convertidor de Markdown toma tu fuente Markdown y produce las etiquetas HTML equivalentes: ## se convierte en <h2>, **negrita** en <strong>, y así sucesivamente.

¿Qué es GitHub Flavoured Markdown (GFM)?

GitHub Flavoured Markdown es un superconjunto de la especificación original de Markdown, creado por GitHub. Añade tablas, listas de tareas (casillas de verificación), tachado (~~texto~~), bloques de código delimitados con sugerencias de idioma y enlace automático de URLs. El GFM se ha convertido en el estándar de facto usado por la mayoría de las herramientas y plataformas Markdown, y este convertidor lo soporta completamente.

¿Qué características de Markdown son compatibles?

Este convertidor soporta la especificación completa de GitHub Flavoured Markdown: encabezados (H1–H6), negrita, cursiva, negrita+cursiva, tachado, código en línea, bloques de código, citas, listas ordenadas, listas no ordenadas, listas anidadas, listas de tareas, enlaces, imágenes, tablas, líneas horizontales y paso de HTML sin procesar. Una guía de referencia de sintaxis completa está disponible más abajo en esta página.

¿Mi Markdown se envía a un servidor?

No. Toda la conversión ocurre completamente en tu navegador usando la biblioteca de código abierto marked. Nada de lo que escribes se envía a un servidor ni se almacena en ningún lugar. Incluso puedes usar esta herramienta sin conexión una vez que la página se haya cargado.

¿Puedo usar el archivo .html descargado directamente en un navegador?

Sí. El archivo descargado es un documento HTML completo e independiente con declaración DOCTYPE y etiquetas <html>, <head> y <body>. Puedes abrirlo directamente en cualquier navegador. Ten en cuenta que no incluye CSS, por lo que se renderizará con los estilos predeterminados del navegador a menos que añadas una hoja de estilos manualmente.

¿Puedo convertir un archivo README.md a HTML con esta herramienta?

Sí. Abre tu archivo README.md, copia el contenido y pégalo en el editor. La herramienta renderiza GitHub Flavoured Markdown de manera idéntica a como lo hace GitHub — encabezados, bloques de código, tablas, listas de tareas e imágenes funcionan correctamente. Luego puedes copiar el HTML para usarlo en sitios de documentación, wikis u otros lugares.

¿Puedo usar el HTML generado en WordPress, Ghost u otras plataformas CMS?

Sí. El HTML generado es limpio, compatible con estándares y funciona con cualquier CMS o plataforma que acepte HTML. En WordPress, pégalo en el bloque HTML o en el bloque HTML personalizado. En Ghost, usa la tarjeta HTML. La mayoría de los generadores de sitios estáticos (Hugo, Jekyll, Eleventy) también aceptan parciales HTML directamente.

¿Qué pasa con el HTML en línea dentro de mi Markdown?

El HTML en línea se pasa sin cambios. Si escribes un <div> o <span> dentro de tu Markdown, aparecerá tal cual en la salida. Este es el comportamiento estándar de Markdown y es útil para añadir estilos o elementos que la sintaxis Markdown no soporta de forma nativa.

¿Esta herramienta añade resaltado de sintaxis a los bloques de código?

El convertidor añade atributos de clase de idioma a los bloques de código delimitados (ej.: <code class="language-javascript">) que son reconocidos por bibliotecas populares de resaltado de sintaxis como Prism.js o highlight.js. Sin embargo, la herramienta en sí no incluye un resaltador — necesitarás incluir uno en tu página final si deseas una salida con color.

¿Cómo añado imágenes en Markdown?

Usa la sintaxis ![Texto alternativo](URL) — por ejemplo, ![Logo](https://example.com/logo.png). El texto alternativo es importante para la accesibilidad. Para añadir un título de información emergente, usa ![Texto alternativo](URL "Título aquí"). Las imágenes deben estar alojadas en algún lugar; esta herramienta no sube archivos.

¿Cómo creo casillas de verificación en listas de tareas?

Usa - [ ] para un elemento sin marcar y - [x] para uno marcado. Por ejemplo, `- [x] Escribir el README` crea una casilla marcada y `- [ ] Desplegar en producción` crea una sin marcar. Esta es una extensión de GitHub Flavoured Markdown no disponible en Markdown básico.

¿Cómo creo una tabla en Markdown?

Usa caracteres de barra vertical para separar columnas y guiones para definir la fila de encabezado: `| Columna 1 | Columna 2 |` en la primera línea, `|-----------|-----------|` en la segunda, luego `| Valor 1 | Valor 2 |` para cada fila de datos. Alinea columnas con dos puntos: `|:------|` para izquierda, `|------:|` para derecha, `|:------:|` para centro.

¿Cuál es la diferencia entre las vistas Vista Previa y Código HTML?

Vista Previa renderiza tu Markdown como HTML formateado — ves encabezados, texto en negrita, tablas y listas como aparecerían en un navegador. Código HTML muestra el código HTML sin procesar generado desde tu Markdown, que puedes copiar y usar directamente en tu proyecto. Puedes alternar entre las dos vistas en cualquier momento usando el botón sobre el panel derecho.

Herramientas relacionadas

Conversor de YAML a JSON

Convierte entre YAML y JSON al instante. Detecta la dirección automáticamente — todo en tu navegador.

Generador de Tablas Markdown

Crea tablas Markdown visualmente o pega desde Excel, Google Sheets o CSV. Configura la alineación de columnas y exporta GFM.

Base64 Encoder / Decoder

Encode and decode Base64 text quickly and easily.

Codificador / Decodificador de URL

Codifica URLs al formato percent-encoded o decodifica URLs codificadas de vuelta a texto legible.

Herramientas visitadas recientemente

Text Diff

Developer

Compare two texts and highlight additions and deletions line by line.

URL Encoder / Decoder

Developer

Encode URLs to percent-encoded format or decode encoded URLs back to readable text.

YAML to JSON Converter

Developer

Convert between YAML and JSON instantly. Auto-detects direction — all in your browser.