Vista previa de Markdown, conversor HTML y guía de sintaxis
Vista previa Markdown, conversión con HTML y guía de sintaxis
Vista previa Markdown, conversión con HTML y guía de sintaxis
El resultado renderizado aparecerá aquí.
Cargando…
Procesando…
0.0
No se ha bloqueado: el resultado aparecerá cuando termine el cálculo.
Acerca de Vista previa de Markdown, conversor HTML y guía de sintaxis
No existe un único Markdown. La descripción original de John Gruber, de 2004, dejaba muchos casos ambiguos y cada analizador los resolvía a su manera; CommonMark es la especificación que fijó esos casos, y GitHub Flavored Markdown (GFM) es CommonMark más algunas extensiones como tablas, listas de tareas y tachado. Esta herramienta convierte con marked, un analizador de código abierto que sigue CommonMark y GFM, y solo se aparta de él en el trato del HTML en bruto, por seguridad. Saber en qué coincide y en qué difiere evita sorpresas cuando el mismo texto acaba en GitHub o en un gestor de blogs.
La página reúne tres modos: vista previa en vivo, un conversor Markdown ↔ HTML en ambos sentidos y una guía de sintaxis que muestra cada elemento junto a su resultado.
El HTML en bruto se muestra como texto y nunca se ejecuta
CommonMark deja pasar el HTML en bruto tal cual y confía la limpieza a quien integra el renderizador. GFM añade la extensión de “HTML en bruto no permitido”, que neutraliza una lista corta de etiquetas, entre ellas script, style, iframe, textarea y title, escapando su corchete angular de apertura.
Esta herramienta es más estricta: escapa todo lo que el analizador reconoce como HTML en bruto. Así, <script>alert(1)</script> aparece como texto dentro de un párrafo en lugar de ejecutarse. La contrapartida es que etiquetas inofensivas que GitHub sí admite, como <details> o <kbd>, también salen como texto. Las URL de enlaces e imágenes se revisan según su esquema, y las ejecutables como javascript: o vbscript: se sustituyen por #.
Qué se admite y dónde difiere de la especificación
Se admite todo CommonMark, incluidos los encabezados ATX y Setext, las reglas de flanqueo del énfasis, los saltos de línea forzados (dos espacios o una barra invertida al final), las listas “5.” y “3)” con su número inicial, el código sangrado con cuatro espacios, los enlaces por referencia y los escapes con barra invertida, además de las extensiones de GFM: tablas con alineación :--:, ~~tachado~~, tareas - [ ] y autoenlaces www. sin corchetes. Por eso snake_case_name conserva sus guiones bajos y una URL con paréntesis equilibrados como …/Foo_(bar) sigue siendo un solo enlace. Las diferencias que quedan:
- HTML en bruto. Etiquetas como <details>, <kbd> o <!-- comentarios --> no se renderizan ni se ocultan: aparecen como texto (ver la sección anterior).
- Las notas al pie ([^1]), las listas de definición, los códigos de emoji como :smile: y los id de ancla de los encabezados son extensiones fuera de la especificación GFM, así que no se generan.
- Los caracteres no ASCII y los espacios de las URL de enlaces se codifican con porcentajes (%C3%B1, etc.), como hace la implementación de referencia de CommonMark. El navegador abre la misma dirección.
Modo conversor: Markdown ↔ HTML
Markdown → HTML usa el mismo renderizador que la vista previa, así que el tachado, las casillas de tareas y las barras escapadas (\|) en celdas de tabla salen exactamente igual, con un salto de línea entre etiquetas de bloque para que se lea mejor.
HTML → Markdown devuelve a Markdown encabezados, párrafos, negrita y cursiva, enlaces, imágenes, listas anidadas, citas, bloques pre/code, tablas, <br> y <hr>. <del> vuelve como ~~tachado~~ y las casillas como [x] o [ ]. Los elementos script y style se eliminan con su contenido. Cualquier otra etiqueta que no conoce se quita conservando el texto, y todos los atributos (class, style, onclick) desaparecen. Las etiquetas de bloque como div o section reciben una línea en blanco a cada lado, para que su texto no se pegue al último elemento de una lista anterior. Resulta útil para llevar un trozo de página web a un README, aunque la maquetación basada en div se aplanará.
Modo guía de sintaxis
La guía recorre encabezados, párrafos y saltos de línea, énfasis, listas, enlaces e imágenes, código, citas, separadores, tablas, escapes y HTML en línea. Cada resultado es el HTML correcto según la especificación y, en la mayoría de los casos, coincide con la vista previa. Para lo que esta herramienta no genera (notas al pie, listas de definición, códigos de emoji, id de encabezados, HTML en línea y comentarios) la guía muestra, escrito a mano, lo que producen plataformas como GitHub, así que en esas entradas la guía y la vista previa no coinciden.
Ejemplos
La limpieza en acción
- Entrada
<script>alert(1)</script> [pulsa aquí](javascript:alert(1))- Resultado
<p><script>alert(1)</script></p> <p><a href=“#” rel=“noopener noreferrer”>pulsa aquí</a></p>
La etiqueta se escapa como texto y el enlace javascript: pasa a ser #. Los paréntesis equilibrados dentro de una URL se leen como parte de ella.
Identificadores con guiones bajos
- Entrada
snake_case_name and file_name_here- Resultado
<p>snake_case_name and file_name_here</p>
Según CommonMark, un guion bajo dentro de una palabra no puede abrir ni cerrar énfasis, así que el texto queda tal cual. El asterisco sí funciona dentro de palabras: en foo*bar*baz, bar pasa a cursiva.
De HTML a Markdown
- Entrada
<h2>Hi</h2><p>A <strong>b</strong> <a href=“/x”>l</a></p><ul><li>one<ul><li>two</li></ul></li></ul>- Resultado
## Hi A **b** [l](/x) - one - two
Las listas anidadas vuelven con sangría de dos espacios, que aceptan tanto CommonMark como GFM.
Numeración de listas ordenadas
- Entrada
5. five 6. six- Resultado
<ol start=“5”> <li>five</li> <li>six</li> </ol>
La lista empieza en el primer número que escribes, útil para continuar una lista de pasos tras un párrafo. Los números siguientes se ignoran: 5. 5. 5. sigue contando 5, 6, 7.
Cómo se usa
- Elige Vista previa, Conversor o Guía de sintaxis en las pestañas.
- Escribe Markdown (o HTML) a la izquierda; el resultado se actualiza al teclear.
- Copia el HTML o Markdown resultante.
Preguntas frecuentes
En GitHub se ven los saltos de línea y aquí las líneas se unen. ¿Por qué?
Los issues y comentarios de GitHub conservan los saltos simples, pero los archivos como README.md y CommonMark en general solo separan párrafos con una línea en blanco. Esta herramienta sigue la especificación: termina la línea con dos espacios o una barra invertida (\) para saltar dentro del párrafo, y deja una línea en blanco para empezar otro.
¿Puedo mezclar HTML con Markdown?
En esta herramienta no: toda etiqueta se muestra como texto. Es intencionado, para que el contenido pegado nunca ejecute scripts en la página.
¿El bloque de código lleva resaltado de sintaxis?
Una valla como ```js produce <pre><code class=“language-js”>. El color lo aplica un resaltador como Prism o highlight.js leyendo esa clase; la herramienta no añade colores por sí misma.
¿Cómo pongo una barra vertical dentro de una celda?
Escápala como \|. Tanto la vista previa como el conversor la tratan como un | literal.
¿~una tilde~ produce tachado?
Sí. Como en GFM, una o dos tildes producen <del>.
Fuentes
Revisado el: