📑 Markdown Preview
Pega Markdown y ve una vista previa HTML en tiempo real. Renderizado tipo GitHub con resaltado de código.
📚 Sintaxis soportada
🔗 Herramientas relacionadas
📖 Dónde se suele tropezar
Pega Markdown y el HTML se renderiza en vivo, con el HTML convertido listo para copiar. Se admiten las construcciones principales de GitHub Flavored Markdown y el resaltado de código. Todo se ejecuta en el navegador. No existe una especificación única de Markdown: CommonMark, GFM, Qiita, Zenn, Notion y Slack son dialectos distintos, así que cómo se ve aquí no garantiza cómo se verá donde lo pegues.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| Los saltos de línea y las listas se rompen en el destino | Donde más difieren los dialectos es en cómo tratan los saltos de línea. GFM convierte un salto simple en un <br>, mientras que CommonMark lo ignora y une las líneas en un solo párrafo: el mismo texto sale en tres líneas en un sitio y en una en otro. Las listas anidadas dependen de si la sangría es de dos espacios o de cuatro, de modo que un anidamiento escrito con dos puede aplanarse, o leerse como bloque de código. Slack, por su parte, no entiende ni encabezados ni tablas. |
Deja siempre una línea en blanco alrededor de los bloques. Basta con tener una antes de un encabezado, una lista, una tabla o un bloque de código para eliminar casi toda la variación entre dialectos. Para separar párrafos, usa una línea en blanco y no un solo salto: todos los dialectos lo tratan como separación de párrafo. Unificar la sangría de listas en cuatro espacios o un tabulador es lo más seguro. Cuando no encuentres la causa de un bloque roto, sospecha de un espacio de ancho completo: escrito al inicio de línea con un método de entrada japonés activo es completamente invisible en pantalla y no se reconoce como sangría, lo que lo sitúa entre los motivos más frecuentes de listas rotas. |
| Las etiquetas HTML pasan tal cual | La especificación de Markdown permite HTML en crudo: los conversores dejan pasar tanto <div> como <script> hasta la salida. Esta página sólo muestra lo que tú mismo escribiste, así que no sanea nada, pero montar el mismo mecanismo en un servicio sin entender esto te da un XSS de manual. La creencia de que Markdown es seguro por naturaleza está muy arraigada, y un usuario que escriba <img src=x onerror=...> en un comentario consigue que se ejecute literalmente en el HTML convertido. |
Si muestras Markdown escrito por usuarios, sanea siempre el HTML resultante, en ese orden: DOMPurify.sanitize(marked.parse(input)). No te fíes de la opción sanitize de la propia biblioteca: la de marked quedó obsoleta y ya se ha eliminado. Invertir el orden, sanear y luego convertir, no sirve de nada, porque Markdown reconstruirá tan campante el texto escapado. El mismo procesado tiene que ejecutarse también en el servidor: sanear sólo en el navegador se salta en cuanto alguien llama a tu API directamente. |
| La tabla no se renderiza como tabla | Las tablas son una extensión que el Markdown estándar no tiene; las añadió GFM. Así que en un entorno que no las admite obtienes un único párrafo lleno de barras verticales. Incluso donde sí se admiten las condiciones son estrictas: si la fila de encabezado y la fila separadora de debajo (|---|---|) no tienen el mismo número de columnas, no se reconoce como tabla. Algunas implementaciones exigen además al menos tres guiones en el separador. Y sin una línea en blanco delante, el bloque se lee como continuación del párrafo anterior y tampoco llega a ser una tabla. |
Cuenta primero las columnas de la fila separadora: con una de diferencia ya no se renderiza. Las barras finales son opcionales, pero si tienes dudas, pon un | al principio y al final de cada fila: así puedes contar las columnas a ojo y el error salta a la vista. Más de fondo: una tabla de Markdown deja de merecer la pena en Markdown en cuanto ya no se lee como texto plano. Pasadas las cinco columnas, o con celdas de texto largo, abandonar la tabla por una lista con viñetas, o escribir directamente una <table> de HTML, suele acabar siendo más legible. |
Los resaltadores reconocen nombres distintos para el mismo lenguaje. js y javascript suelen ser equivalentes, pero el intérprete de comandos varía entre sh, bash, shell y console, y console excluye del resaltado el carácter del prompt ($), lo que se lee mejor cuando publicas órdenes para copiar. Omitir el lenguaje no sólo pierde el resaltado: también afecta a cómo colorea GitHub los diffs. Por último, un principio para escribir en Markdown: su valor está en que se lee bien sin convertirlo. Si de tanto acumular negrita, cursiva y encabezados el texto plano ha quedado ilegible bajo un montón de signos, estás usando mal Markdown. Un documento que necesita tanta decoración es un documento que debería haberse escrito en otro formato.
📖 Cómo usar
-
1
Escribe MarkdownEscribe Markdown a la izquierda.
-
2
Vista previa en vivoHTML estilo GitHub a la derecha.
-
3
Copiar como HTMLCambia a la pestaña HTML y copia.
❓ Preguntas frecuentes
¿Es GFM?
¿HTML en bruto?
¿LaTeX math?
¿Dónde se guarda?
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.