Saltar al contenido

Editor de Markdown

Markdown Editor

Edita Markdown con vista previa en vivo y exporta el HTML renderizado, con tablas y listas de tareas de GFM.

Un editor de Markdown con el resultado renderizado al lado, el HTML detrás y un esquema de los encabezados. El analizador es la implementación propia de CommonMark de este repositorio, que obtiene un 99,8 % en el corpus de 652 ejemplos de la especificación.

🔒 Se ejecuta por completo en tu navegadormarkdownprevieweditorhtml

Markdown

Vista previa

Vista

Sobre el proyecto

Un editor de Markdown con vista previa en vivo. Negrita, cursiva, código y enlaces.

Puesta en marcha

  1. Clona el repositorio
  2. Ejecuta el instalador
  3. Abre la aplicación
Artículo Cant. Importe
Laptop 2 2.400.000
Monitor 3 900.000

Una cita, para dar énfasis.

const total = items.reduce((sum, item) => sum + item.price, 0);
  • [x] Las listas de tareas funcionan
  • [ ] También las que no están marcadas

Opciones

Documento

palabras

68

caracteres

520

enlaces

1

imágenes

0

bloques de código

1

tablas

1

Esquema

  • Sobre el proyecto #sobre-el-proyecto
  • Puesta en marcha #puesta-en-marcha

Los anclajes se transliteran en lugar de codificarse con porcentajes, así que «Instalación» da instalacion: un enlace que sobrevive a pegarlo en un chat.

El analizador de aquí es la implementación de CommonMark del propio repositorio, la misma que usa el conversor a DOCX, y saca un 99,8 % en los 652 ejemplos de la especificación. Las tablas con barras de GFM son un añadido encima.

Cómo se usa

  1. Escribe o pega el Markdown

    La vista previa se actualiza mientras escribes. Un bloque de front matter YAML al inicio se reconoce y se deja fuera de la vista previa en lugar de renderizarse como una línea horizontal.

  2. Cambia a HTML cuando necesites el resultado

    El mismo documento como HTML, listo para copiar en un CMS o en una plantilla de correo. La descarga te da un archivo completo.

  3. Usa el esquema para revisar la estructura de encabezados

    Cada encabezado con el ancla que recibirá. Un salto de h2 a h4 se ve aquí de inmediato, y también un ancla duplicada.

Preguntas frecuentes

¿Por qué el HTML en bruto se descarta por defecto?

CommonMark dice que se deje pasar, lo que es correcto para un documento que escribiste tú y un agujero de cross-site scripting para uno que pegaste. El interruptor está ahí, con un aviso, para tus propios documentos.

Mis tablas no se renderizan

Las tablas con barras verticales son una extensión de GitHub, no parte de CommonMark. El interruptor está activado por defecto; si está apagado estás viendo el comportamiento estricto de la especificación, que renderiza las barras como texto.

¿Por qué las anclas están romanizadas?

Para que un enlace a un encabezado en coreano — o con tildes — sobreviva a que lo peguen en una ventana de chat. Un ancla codificada con porcentajes es correcta e ilegible, y varios sistemas la rompen por el camino.

Puede recibir de

Después

Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.