Vista previa de Markdown
Ve tu Markdown representado mientras escribes, en tu navegador, con todo el HTML en bruto escapado en lugar de ejecutado.
Se ejecuta enteramente en tu navegador. No se sube, registra ni guarda nada.
El HTML que produce
Escribe Markdown a la izquierda y léelo a la derecha. Todo pasa en tu navegador, así que un borrador que todavía no quieres enseñar a nadie no tiene que enseñarse antes a un servidor.
Cómo funciona
El documento se lee línea a línea en bloques —encabezados, párrafos, listas, citas, código, tablas— y luego el texto de cada bloque se lee en busca de las piezas en línea: énfasis, fragmentos de código, enlaces e imágenes. Todo lo que el renderizador no reconoce se queda como texto.
El HTML en bruto se escapa en lugar de dejarlo pasar. Si escribes una etiqueta, ves la etiqueta. Es una desviación deliberada respecto a la mayoría de los renderizadores, que permiten un subconjunto seleccionado, y la razón es que seleccionar bien ese subconjunto es un trabajo que ha salido mal en proyectos mucho más grandes, una y otra vez.
Solo se crea un enlace cuando su dirección empieza por un esquema de una lista corta, comprobada sobre la forma decodificada de la dirección y no sobre lo que se escribió. Cuando se rechaza, el texto se queda y el enlace no, para que puedas ver que había algo.
Ejemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Énfasis y código en línea | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
Preguntas frecuentes
¿Se envía mi documento a alguna parte?
No. El renderizador es JavaScript ejecutándose en esta página. No se sube nada, no se registra nada y no se almacena nada: puedes desconectar la red y la herramienta sigue funcionando.
¿Por qué mi HTML aparece como texto?
Porque se escapa a propósito. Markdown permite que un documento contenga HTML, y dejar pasar ese HTML significa decidir qué etiquetas y qué atributos son seguros, una decisión que es sutil, que cambia a medida que cambian los navegadores y en la que han fallado más de una vez proyectos con muchos más recursos. Escaparlo todo no tiene ese modo de fallo. El coste es que un documento que se apoye en HTML en línea no se verá como se ve en GitHub, y ese es el intercambio que se hace.
¿Es exactamente CommonMark?
No, y decir que sí sería engañoso. Es un subconjunto, más las tablas, las listas de tareas y el tachado del sabor de GitHub. Cubre encabezados, párrafos, énfasis, fragmentos y bloques de código, enlaces, imágenes, listas anidadas, citas y líneas. Los enlaces por referencia, las notas al pie y los bloques de HTML no están implementados.
¿Por qué no aparecen las imágenes remotas?
Porque esta página no se permite cargar imágenes de otros sitios. Descargar una le diría a ese servidor que estás leyendo este documento, y a qué hora, que es justo la fuga que una vista previa local existe para evitar. La etiqueta de imagen está en el HTML de salida, así que funciona donde lo pegues: simplemente no se dispara desde aquí.
¿Qué pasa con un enlace como javascript:…?
No se convierte en enlace. El esquema se compara con una lista corta —http, https, mailto, tel, ftp, o ningún esquema en el caso de una ruta relativa— y la comprobación se hace sobre la dirección decodificada, porque un navegador resuelve las entidades de un atributo antes de actuar sobre él. El texto del enlace se queda a la vista para que puedas ver qué había.
Conviene saber
- El HTML que muestra la vista previa es el HTML que te da la herramienta. Hay una sola salida, no una segura para mostrar y otra distinta para copiar.
- Los encabezados no reciben atributo id. Un id sacado de tu documento compartiría espacio de nombres con los de esta página, y una colisión rompería la página que rodea a la vista previa.
- Los enlaces a otros sitios llevan rel="nofollow noopener noreferrer", así que una página abierta desde aquí no obtiene ningún control sobre esta.
Todas las herramientas de Código