Vista previa de Markdown con tablas, tareas e imágenes
Pegar un README en esta vista previa de Markdown sirve para ver si la tabla de la mitad quedó bien escrita antes de subirlo. A la izquierda está el texto fuente y a la derecha la página ya renderizada. También encaja con un changelog o un comentario de ticket. Un contador sobre los paneles indica las palabras y los caracteres del texto.
Cómo se escribe una tabla
La primera fila es el encabezado. Debajo va una fila separadora de guiones. En ella, los dos puntos fijan la alineación: :-- a la izquierda, :-: centrada y --: a la derecha. Las barras verticales de los extremos son opcionales. Si una celda debe contener una barra, escribe \|. Dentro de las celdas funcionan negrita, cursiva, código y enlaces.
Una fila con pocas celdas se completa con celdas vacías. Las celdas que sobran respecto al encabezado se descartan. No hace falta una línea en blanco antes de la tabla: puede empezar justo debajo de una línea de texto. Eso sí, una celda admite una sola línea de texto en línea. Una lista o un segundo párrafo no caben, y un <br> tecleado se muestra como texto. Si la tabla es ancha, se desplaza en horizontal dentro de la vista previa.
Sintaxis que se renderiza
La página usa la biblioteca marked en modo GitHub. Muestra títulos del nivel 1 al 6, negrita, cursiva, ~~tachado~~, código en línea, bloques de código con vallas, citas, listas numeradas y con viñetas, listas anidadas, listas de tareas, líneas horizontales, enlaces, imágenes y tablas. Una dirección suelta como https://example.com se convierte en enlace sin corchetes. Las casillas de las listas de tareas no se pueden marcar.
Un salto de línea en el texto fuente da un salto de línea en el resultado, y una línea en blanco abre un párrafo nuevo. Se acepta el nombre del lenguaje tras la valla, por ejemplo js, pero el código no lleva colores.
Usar los paneles y el divisor
- Escribe o pega Markdown en el panel "Código fuente Markdown". El panel "Vista previa en vivo" se actualiza con cada tecla.
- Arrastra el divisor entre los paneles con ratón, dedo o lápiz. Un doble clic lo devuelve al 50/50. Con el teclado, enfoca el divisor y pulsa Izquierda o Derecha (2 por ciento), Mayús con flecha (10 por ciento), Inicio, Fin o Intro (restablecer).
- "Vista ampliada" llena la pantalla y mantiene el ancho que elegiste.
- "Copiar HTML" copia el cuerpo del HTML ya depurado. "Guardar como HTML" descarga
document.htmlcon una hoja de estilo breve que incluye tablas.
El ancho se mantiene entre el 15 y el 85 por ciento, y el navegador lo recuerda en este dispositivo mediante el almacenamiento local. Por debajo de 860 px los paneles se apilan y el divisor desaparece.
HTML en bruto, enlaces e imágenes externas
El HTML que escribas en el texto fuente se muestra como texto y nunca se ejecuta. Los enlaces conservan solo estos destinos: http, https, mailto, #ancla y rutas relativas. Cualquier otro enlace pierde su destino.
La vista previa no carga imágenes externas, porque al cargarlas tu navegador contacta con el sitio que las aloja. En su lugar aparece un marcador con el texto alternativo. El interruptor "Cargar imágenes externas" las muestra. Las imágenes incrustadas como data:image/png;base64, (también JPEG, GIF, WebP y AVIF) se ven siempre. El HTML copiado y el guardado conservan cada etiqueta de imagen con su dirección.
Lo que falta y adónde va tu texto
No hay colores de sintaxis, ni notas al pie, ni fórmulas, ni códigos de emoji como :smile:, ni front matter. Un bloque entre dos líneas --- aparece como una línea y un título. Los dos paneles no se desplazan a la vez.
Las bibliotecas marked y dompurify se cargan al abrir la página. Si falla la carga, la vista previa muestra un aviso. Después, el navegador convierte tu Markdown y no envía nada; puedes comprobarlo en el panel de red. El portapapeles se usa solo con "Copiar HTML", y el archivo se crea solo con "Guardar como HTML".
Preguntas frecuentes (FAQ)
| --- | --- |.