Conversor Markdown a HTML & Vista Previa

Conversor Markdown a HTML & Vista Previa

Convierte Markdown en código HTML limpio y listo para producción en tiempo real. Incluye tablas GFM, resaltado de sintaxis, saneamiento XSS, copia de texto enriquecido y exportación completa.

Preajustes:
Dialecto:
Formato de Exportación:
Editor de Markdown de Origen
Líneas: 31Palabras: 125Caracteres: 885Bytes: 885
Tiempo de Análisis: 3ms

Turbopack Build Optimizer

Build Status License: MIT

A next-generation zero-config build toolkit for modern web applications.

Feature Matrix

| Capability | Classic Webpack | Turbopack Native |
| :— | :—: | :—: |
| Cold Start (10k modules) | 8.4s | 1.2s |
| HMR Update Latency | 320ms | 18ms |
| Memory Footprint | 640 MB | 180 MB |

Roadmap & Progress

  • Rust-powered AST parsing engine
  • WebAssembly parallel sourcemap bundler
  • Edge runtime hot-reload socket connection
  • Automated polyfill treeshaking
# Install Turbopack globally
npm install -g @toolsaa/turbopack-cli

# Run dev benchmark
turbopack dev –port 3000
Tamaño de Salida: 3424 bytesCompilado: 100%
XSS Neutralizado
Tiempo de Análisis3 ms
Seguridad y XSSSaneamiento DOM Estricto (Sin XSS)
Formato de Exportaciónstandalone
Procesamiento en el Cliente

Compilación de alto rendimiento ejecutada íntegramente en la memoria del navegador.

Privacidad sin Carga en Servidor

Todas las cargas útiles permanecen estrictamente locales, sin comunicación con servidores externos.

Exportación Lista para Producción

Formatos de salida limpios y optimizados, preparados para su despliegue inmediato.

Referencia técnica y guía de arquitectura

Conversor Markdown a HTML & Vista Previa — Guía de referencia

Convierte Markdown a código HTML limpio y listo para producción en tiempo real. Incluye tablas GFM, resaltado de sintaxis, saneamiento XSS, copia en texto enriquecido y exportación completa de documentos.

Conversor Markdown a HTML & Vista Previa — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos
Conversor Markdown a HTML & Vista Previa — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos

Parámetros clave y controles

Fuente Markdown sin procesar (rawMarkdownSource)String (RFC 7763 text/markdown)

Flujo del documento de entrada UTF-8 sin procesar conforme a la gramática de CommonMark o GitHub Flavored Markdown (GFM). La tokenización léxica procesa los caracteres en tiempo lineal determinista O(n) con análisis sintáctico acotado (lookahead), aislando bloques de frontmatter, estructuras a nivel de bloque y fragmentos inline dentro de un contexto de ejecución aislado en Web Worker.

Por defecto: Automático
Modo de dialecto Markdown (markdownDialectMode)Enum [gfm | commonmark | minimal]

Determina la especificación del analizador léxico y la construcción del AST: 'gfm' aplica las extensiones de GitHub Flavored Markdown (tablas con barras verticales, texto tachado, enlaces automáticos y listas de tareas); 'commonmark' impone el cumplimiento estricto de la especificación CommonMark 0.31.2; 'minimal' procesa tokens estándar de citas y encabezados mientras bloquea extensiones anidadas complejas.

Por defecto: gfm
Modo de destino de exportación HTML (htmlExportMode)Enum [fragment | standalone | email-inline]

Configura el alcance de serialización de los nodos DOM compilados: 'fragment' emite elementos HTML semánticos internos limpios (<article>); 'standalone' compila un documento W3C HTML5 válido con <!DOCTYPE html>, metadatos y etiquetas viewport; 'email-inline' procesa las reglas en cascada de CSS convirtiéndolas en atributos de estilo en línea conforme a los motores de renderizado de correo de la RFC 5322.

Por defecto: fragment
Política de saneamiento XSS (xssSanitizationPolicy)Enum [strict-sanitized | trusted-raw]

Aplica el saneamiento recursivo durante el recorrido del árbol de nodos AST/DOM mediante DOMPurify y el aislamiento en DOMParser del navegador. Admite en lista blanca esquemas de URI seguros (http:, https:, mailto:), elimina vectores de ejecución de scripts, iframes, objetos incrustados y atributos de eventos DOM en línea (onload, onerror, onclick) para prevenir ataques de XSS persistente (Stored XSS) e infracciones de CSP.

Por defecto: strict-sanitized
Política de slug para anclajes de títulos (headingAnchorPolicy)Enum [kebab-slug | numeric-id | none]

Controla la generación determinista automatizada de atributos id en las etiquetas de encabezado <h1>–<h6>. 'kebab-slug' transforma el texto del encabezado en caracteres alfanuméricos ASCII en minúsculas separados por guiones según el estándar RFC 3986 para fragmentos de URI en enlaces internos profundos; 'numeric-id' asigna identificadores secuenciales monotónicos.

Por defecto: kebab-slug
Política de seguridad de enlaces externos (externalLinkPolicy)Boolean

Inyecta rel="noopener noreferrer" y target="_blank" en todos los nodos de anclaje externos (<a>) cuyo nombre de host (href) difiera de window.location.hostname, neutralizando ataques de tabnabbing inverso (reverse tab-nabbing) a través de vectores de explotación en window.opener.

Por defecto: true
Política de extracción de Frontmatter (frontmatterExtraction)Boolean

Aísla y descarta los metadatos iniciales del documento delimitados por triples guiones (---) o triples signos más (+++) antes de la compilación de markdown. Serializa pares clave-valor estructurados en YAML/TOML en objetos de metadatos, evitando que los delimitadores de frontmatter se filtren al cuerpo del HTML.

Por defecto: true
Tipografía inteligente y puntuación (smartTypography)Boolean

Ejecuta reemplazos lineales deterministas mediante expresiones regulares convirtiendo comillas rectas ASCII en comillas tipográficas curvadas (&ldquo;/&rdquo;, &lsquo;/&rsquo;), guiones dobles o triples en rayas y semirrayas (&ndash;/&mdash;), y puntos suspensivos consecutivos en caracteres de elipsis Unicode (&hellip;) sin alterar fragmentos de código.

Por defecto: true

Consejos profesionales y mejores prácticas

La compilación de tablas GFM exige filas separadoras explícitas bajo el encabezado

Bajo la especificación GitHub Flavored Markdown (GFM §4.10) y las extensiones de tabla de CommonMark, una tabla ASCII no se tokeniza en un elemento semántico <table> a menos que exista una fila delimitadora inmediatamente debajo del encabezado. Esta fila debe contener al menos tres guiones por columna (por ejemplo, '| :--- | :---: | ---: |'). Los dos puntos determinan la alineación del texto: izquierda (:---), centro (:---:) y derecha (---:). Omitir la fila delimitadora, prescindir de líneas en blanco previas o no escapar los caracteres de barra vertical (\|) dentro del texto de las celdas provocará que el analizador aborte el estado de tabla y vuelva a texto de párrafo sin formato.

Mitigación de ataques XSS persistente mediante enlaces e imágenes de Markdown sin sanear

Por defecto, las especificaciones de Markdown permiten la inclusión directa de HTML sin procesar y esquemas arbitrarios de URI, lo que introduce graves riesgos de Cross-Site Scripting (XSS). Entre los vectores de explotación destacan destinos ofuscados en enlaces como [Payload](javascript:alert(document.domain)) o etiquetas de imagen con URIs de tipo data: y cargas maliciosas en SVG. Las aplicaciones web del lado del cliente nunca deben inyectar la salida sin procesar del compilador directamente en innerHTML. Se debe pasar siempre el árbol DOM compilado por un saneador O(n) como DOMPurify o la API nativa HTML Sanitizer configurada con listas blancas estrictas de protocolos (http:, https:, mailto:) y directivas compatibles con CSP Nivel 3.

Conservación de saltos de línea forzados: dos espacios frente a barra invertida

En rigurosa conformidad con CommonMark §6.7, un salto de línea simple dentro de un párrafo se interpreta como un salto suave y se colapsa en un único espacio ASCII (0x20) en el HTML serializado. Para forzar un salto de línea estricto (<br />), se debe terminar la línea de origen con dos o más espacios antes del retorno de carro, o finalizarla con una barra invertida explícita (\). En entornos programáticos, activar la opción breaks: true del analizador léxico convierte los saltos suaves en etiquetas <br />, lo cual resulta fundamental en interfaces de chat, visores de registros y boletines de correo electrónico.

Conflictos de ámbito CSS al incrustar fragmentos HTML en frameworks web modernos

Exportar fragmentos HTML sin aislamiento de ámbito a arquitecturas basadas en componentes (React, Next.js, Vue) genera con frecuencia colisiones de especificidad CSS, en las que los resets globales interfieren con el contenido inyectado o los estilos globales de tablas y listas rompen el diseño anfitrión. Envuelve siempre el HTML compilado en un contenedor de espacio de nombres aislado (por ejemplo, <article class="markdown-body">) y aplica variables personalizadas CSS con ámbito, o selecciona el modo de exportación Documento Independiente, el cual incorpora una hoja de estilos de reseteo aislada conforme a la especificación CSS Containment Module Level 2.

Problemas comunes y soluciones

⚠️Las tablas de Markdown se muestran como texto sin formato con barras verticales en lugar de etiquetas HTML <table>

Verifica que la tabla incluya una fila delimitadora de encabezado válida con al menos tres guiones por columna (por ejemplo, '| --- | --- |') ubicada inmediatamente después de la fila de cabecera. Además, asegúrate de que haya una línea en blanco antes del bloque de la tabla; los analizadores a nivel de bloque de CommonMark y GFM requieren una línea vacía para cerrar los tokens de párrafo anteriores antes de inicializar la máquina de estados de la tabla.

⚠️Las etiquetas HTML sin procesar como <div> o <span> se escapan como entidades &lt;div&gt; en el HTML resultante

Esto ocurre cuando la política de saneamiento XSS está configurada en modo de escape estricto o cuando el compilador de Markdown tiene activada la opción html: false. Para renderizar elementos HTML legítimos en Markdown, asegúrate de que la política de saneamiento permita etiquetas HTML seguras al tiempo que purga scripts ejecutables activos, y comprueba que las etiquetas HTML no tengan una sangría de 4 o más espacios ni un tabulador, lo que activaría el análisis de bloques de código indentados.

⚠️Los bloques de código delimitados se muestran como texto plano sin resaltado de sintaxis por colores

Los analizadores estándar de Markdown solo generan la estructura envolvente en HTML (por ejemplo, <pre><code class="language-typescript">...</code></pre>) y, por diseño, no incluyen temas de color CSS. Para habilitar el resaltado visual de sintaxis, incluye una hoja de estilos de un resaltador del lado del cliente (como el CSS de Prism.js o Highlight.js) en el documento principal, o cambia el modo de exportación en esta herramienta a 'Documento HTML5 independiente', que inserta definiciones de color de sintaxis precompiladas y autónomas.

⚠️El texto con sangría dentro de los elementos de lista se convierte inesperadamente en un bloque de código aislado

Conforme a CommonMark §4.4, aplicar una sangría de 4 espacios o 1 tabulador con respecto al nivel del elemento de lista indica al analizador léxico que instancie un token de bloque de código indentado. Para dar formato a un párrafo multilínea o contenido continuo dentro del mismo elemento <li>, aplica una sangría de exactamente 2 espacios coincidiendo con el ancho del marcador de lista, manteniéndote por debajo del umbral de los 4 espacios.

Preguntas frecuentes (FAQ)

¿Cómo convertir Markdown a HTML en JavaScript?▼

Para convertir Markdown a HTML en JavaScript, analiza la cadena de Markdown original para generar un árbol de sintaxis abstracta (AST) y compílala en una cadena HTML utilizando una biblioteca de análisis de nivel industrial como marked o markdown-it. En ES6+: import { marked } from 'marked'; const rawHtml = marked.parse(markdownText, { gfm: true, breaks: true });. Sanea siempre el marcado resultante con DOMPurify.sanitize(rawHtml) antes de inyectarlo en nodos del DOM mediante innerHTML para neutralizar vectores de ataque por Cross-Site Scripting persistente (Stored XSS).

¿Cuál es la diferencia entre CommonMark y GitHub Flavored Markdown (GFM)?▼

CommonMark es la especificación central, estandarizada e inequívoca para la sintaxis de Markdown, diseñada para eliminar discrepancias de análisis entre distintos motores. Por su parte, GitHub Flavored Markdown (GFM) es un superconjunto formal de CommonMark 0.29 que incorpora extensiones orientadas al flujo de trabajo de desarrolladores. GFM añade compatibilidad nativa con tablas mediante barras verticales (| col |), casillas de verificación en listas de tareas (- [ ] / - [x]), detección automática de enlaces (autolink), texto tachado (~~texto~~) y bloques de código delimitados con identificación de lenguaje.

¿Cómo crear tablas en Markdown que se conviertan en etiquetas HTML <table>?▼

Para crear una tabla HTML <table> válida desde Markdown, escribe una fila de encabezado delimitada por barras verticales (|), seguida obligatoriamente por una fila delimitadora con un mínimo de tres guiones por columna. Por ejemplo: '| Parámetro | Predeterminado |' seguido de '| :--- | ---: |' y filas de contenido como '| Tiempo de espera | 5000ms |'. Los dos puntos en la fila delimitadora establecen la alineación del texto: ':---' alinea a la izquierda, ':---:' centra y '---:' alinea a la derecha. El analizador compila esta estructura en etiquetas semánticas <table>, <thead>, <tbody>, <tr>, <th> y <td>.

¿Cómo prevenir ataques XSS al renderizar Markdown en HTML?▼

Prevenir ataques de Cross-Site Scripting (XSS) durante la conversión de Markdown requiere una arquitectura de saneamiento en profundidad. En primer lugar, configura el compilador de Markdown para bloquear HTML arbitrario sin procesar o restringir protocolos de URI peligrosos. En segundo lugar, procesa la cadena HTML compilada mediante un saneador consolidado como DOMPurify o la API W3C Sanitizer, los cuales eliminan recursivamente etiquetas de script (<script>), objetos incrustados, atributos de eventos en línea (onload, onerror) y pseudoprotocolos no confiables (javascript:, data:text/html).

¿Cómo convertir Markdown en un documento HTML completo e independiente con estilos?▼

Para transformar Markdown en una página HTML independiente, envuelve el fragmento HTML compilado dentro de una plantilla HTML5 completa que incluya <!DOCTYPE html>, <html lang="es">, una cabecera <head> con meta charset="utf-8", configuración de viewport y estilos tipográficos incrustados. En este conversor, selecciona la opción de exportación 'Documento HTML5 independiente' para generar un archivo HTML autónomo y listo para producción, equipado con tipografía adaptativa inspirada en GitHub y estilos CSS compatibles con modo claro y oscuro.

¿Por qué los saltos de línea en Markdown no se muestran como saltos en HTML?▼

Según la sección §6.7 de la especificación estándar CommonMark, los saltos de línea simples dentro de bloques de párrafo se consideran saltos suaves y se reducen a un único espacio ASCII durante la compilación a HTML, permitiendo el ajuste de línea en el código fuente sin romper la continuidad del párrafo. Para forzar un salto de línea estricto (<br />) en HTML, debes añadir dos espacios al final de la línea, terminar la línea con una barra invertida (\) antes del retorno de carro o activar la opción de compilador breaks: true en tu analizador de Markdown.

Herramientas y utilidades relacionadas

Todas las herramientas →
Analizador Cron & Validador CrontabDesarrollo

Analice expresiones cron en descripciones legibles. Inspeccione marcas de tiempo en múltiples zonas horarias, valide sintaxis crontab y proyecte próximas ejecuciones.

Abrir herramienta→
Generador de GraphQL a TypeScriptDesarrollo

Convierte esquemas SDL y consultas GraphQL en tipos, interfaces, enums y resolvers de TypeScript. Generación de código instantánea en el navegador sin configuración ni envío a servidores.

Abrir herramienta→
Convertidor HTML a Markdown (GFM)Desarrollo

Convierte HTML a Markdown con tablas GitHub Flavored Markdown (GFM), bloques de código y recorte web. Elimina estilos inline y exporta archivos .md limpios.

Abrir herramienta→
Comparador de Texto & Diff OnlineDesarrollo

Compara texto, código y archivos con nuestro rápido motor de diff. Inspecciona cambios lado a lado o en línea a nivel de caracteres, omite espacios en blanco y exporta parches unificados.

Abrir herramienta→
Generador de Etiquetas Canónicas & URLsDesarrollo

Genere etiquetas rel=canonical y cabeceras HTTP válidas. Elimine parámetros de seguimiento, normalice URLs y resuelva problemas de contenido duplicado en SEO.

Abrir herramienta→
Convertidor cURL a Fetch (JS & Node)Desarrollo

Convierte comandos cURL a sintaxis Fetch API al instante. Analiza cabeceras HTTP, tokens de autenticación, cookies y cargas JSON a código JavaScript moderno con async/await.

Abrir herramienta→