Visor de Markdown

¿Qué es un visor de Markdown?#

Markdown es la abreviatura en texto plano que usan los desarrolladores para escribir texto enriquecido: **negrita**, # encabezados, - listas, `código`. Un visor es el programa que convierte esas marcas en el HTML que el navegador muestra realmente. Los README, los sitios de documentación, los comentarios en issue trackers, las apps de chat y los generadores de sitios estáticos pasan todos el Markdown por un visor antes de mostrártelo.

Esta página es un visor de Markdown con una prioridad de diseño concreta: es seguro por construcción, no por filtrado. La mayoría de los visores primero convierten el Markdown en HTML y luego intentan limpiar las etiquetas peligrosas del resultado, un modelo en el que una regex olvidada significa una vulnerabilidad XSS. Esta herramienta funciona al revés: cada carácter del origen se escapa como HTML antes de aplicar cualquier formato, y las únicas etiquetas que emite provienen de una lista fija y hardcoded (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br). No existe ninguna ruta de código que pueda emitir una etiqueta <script> desde tu entrada, porque el < en bruto del origen se escapa a < antes de que el formateador lo vea. Eso es lo que lo hace adecuado para un sitio estático con CSP estricta como este.

Implementa un subconjunto centrado de CommonMark más lo esencial de GitHub-Flavored Markdown: bloques de código cercados, encabezados ATX, párrafos, listas ordenadas y sin ordenar, citas en bloque, separadores temáticos (---), código en línea, negrita, cursiva, tachado, imágenes, enlaces y angle autolinks. La misma entrada te da dos salidas lado a lado: la vista previa renderizada y el HTML en bruto, para que veas exactamente qué produjo el visor.

Cómo se usa#

1. Escribe Markdown en el panel izquierdo, o pulsa Ejemplo para cargar un documento incorporado que ejercita todas las funcionalidades admitidas.
2. Cambia la salida con los dos botones sobre el panel derecho:
   • Vista muestra el resultado formateado tal como aparecería en una página web.
   • HTML muestra el HTML exacto que emitió el visor, lo que pegarías en una plantilla o someterías a una auditoría de saneamiento.
3. Pulsa Copiar HTML para llevarte el HTML generado y usarlo en otro sitio: pegarlo en un CMS, incrustarlo en una plantilla o pasarlo por una revisión.
4. Pulsa Limpiar para vaciar ambos paneles.
5. La línea de estado informa de la longitud en bytes del render o anota cuándo la entrada está vacía.

Características clave#

• Seguro por construcción. Todo el texto del origen se escapa como HTML antes del formato, y el visor emite solo una lista fija de etiquetas. No hay ningún paso de «y ahora quita lo peligroso» que se pueda hacer mal.
• Esquemas de URL peligrosos descartados. Las URLs de enlaces e imágenes se comprueban por esquema: javascript:, vbscript:, data:, file: y about: se bloquean, y el texto conflictivo se muestra literal en vez de convertirse en un enlace activo.
• Dos vistas, un origen. Alterna entre la vista previa renderizada y el HTML en bruto sin volver a teclear, para que verifiques tanto el resultado visual como el marcado que produjo.
• Esenciales de GFM incluidos. Tachado (~~texto~~), bloques de código cercados con indicación de lenguaje y listas aptas para tareas se comportan como en el Markdown con sabor GitHub.
• Cero dependencias, 100 % del lado del cliente. El visor es de implementación propia, sin librería de análisis incluida, y se ejecuta completamente en tu navegador. Nada se sube y no hay backend que inyectar nada.

Ejemplo práctico#

Pulsa Ejemplo y el panel izquierdo se rellena con un documento que ejercita la sintaxis central:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

Cambia a HTML y verás exactamente lo que emitió el visor. El párrafo se convierte en:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

El enlace se convierte en un destino con atributos rel seguros:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

y el bloque cercado se convierte en un <pre><code> escapado que conserva el origen verbatim: const x = 42; aparece como texto, no como script ejecutado. Ese último punto es toda la historia de seguridad en miniatura: aunque pegaras <script>alert(1)</script> en el origen, se renderizaría como el texto literal <script>alert(1)</script>, porque el < se escapa a < antes de que el formateador decida qué es una etiqueta.

Preguntas frecuentes#

¿Por qué usaría esto en vez de escribir directamente HTML?#

Porque Markdown es más rápido de teclear, más fácil de leer en su forma fuente y permite que colaboradores no versados en HTML escriban contenido. Este visor es para cuando quieres esa comodidad sin confiar en que una librería de análisis genérica sea además segura: aquí la seguridad viene de la arquitectura, no de un saneador añadido al final.

Pegué una etiqueta <script> y apareció como texto. ¿Es un bug?#

No, es el comportamiento intencionado y la garantía central de seguridad. Cada carácter de tu entrada se escapa como HTML antes del formato, así que cualquier texto parecido a una etiqueta del origen se renderiza como texto visible e inerte. No hay forma, a través de este visor, de meter un <script> activo en la salida.

¿Por qué mi enlace javascript: se mostró como texto plano?#

El visor comprueba el esquema de cada enlace e imagen. Esquemas como javascript:, vbscript:, data:, file: y about: se bloquean porque son los vectores clásicos de ataques de inyección. Cuando se bloquea una URL, el visor deja el fuente Markdown original como texto literal en vez de emitir un ancla peligrosa.

¿Admite tablas, listas de tareas o notas al pie?#

No, este es un subconjunto deliberado y centrado de CommonMark más lo esencial de GFM (código cercado, tachado, autolinks). Las tablas y las notas al pie necesitan un analizador más rico y una superficie de ataque mayor que vigilar; quedan intencionadamente fuera del alcance aquí. Cíñete a las construcciones admitidas enumeradas en las características anteriores.