Editor Markdown — Escribe y previsualiza en vivo
Editor Markdown con vista previa en vivo, resaltado de sintaxis y exportación a HTML. Escribe documentación y READMEs en tu navegador sin registro ni instalación.
¿Qué es el Editor Markdown?
El Editor Markdown es un entorno de escritura en línea gratuito que renderiza una vista previa en tiempo real de tu Markdown mientras escribes. El editor y la vista previa están uno al lado del otro: escribe a la izquierda, ve la salida formateada a la derecha — al instante, sin necesidad de actualizar. Maneja todo, desde encabezados y texto en negrita hasta bloques de código delimitados, tablas y citas en bloque.
La herramienta está diseñada para desarrolladores que escriben READMEs, documentación técnica, borradores de blogs y notas de versión — en cualquier lugar donde Markdown sea el formato de autoría. En lugar de enviar cambios a un repositorio y esperar una renderización de vista previa, o instalar un complemento de editor local, obtienes una vista previa renderizada precisa en el navegador. Cuando termines, exporta el archivo como un archivo .md para el control de versiones o como un archivo .html completo y estilizado listo para una página web. Sin cuenta, sin carga al servidor, sin configuración.
Características principales
- Vista previa Markdown en vivo — Impulsado por
@uiw/react-md-editor, el editor renderiza la vista previa en tiempo real usando el mismo análisis de Markdown que la biblioteca incluye. Los cambios aparecen en la vista previa en el momento en que dejas de escribir un carácter. - Resaltado de sintaxis — Los bloques de código delimitados (
javascript,python, etc.) se renderizan con salida coloreada por sintaxis en el panel de vista previa. La propia vista de Markdown sin formato del editor también aplica coloración de sintaxis para diferenciar encabezados, enlaces, negrita y tramos de código. - Exportar a HTML — "Descargar HTML" produce un documento
<!DOCTYPE html>completo con estilos CSS embebidos que cubren fuente del cuerpo, bloques de código, citas en bloque y tablas. El archivo se descarga comodocument.htmly se abre correctamente en cualquier navegador sin dependencias externas. - Descargar como archivo .md — "Descargar MD" guarda el código fuente Markdown sin formato como
document.md, listo para confirmar en un repositorio o adjuntar a un ticket. - Copiar Markdown — Copia el texto Markdown sin formato al portapapeles para pegarlo en GitHub, GitLab, Confluence, Notion o cualquier campo que acepte Markdown.
- Copiar HTML — Copia el HTML interno renderizado del panel de vista previa. Útil cuando necesitas pegar contenido formateado en un editor de texto enriquecido que acepta HTML.
- Barra de herramientas de formato común — La barra de herramientas de
@uiw/react-md-editorproporciona botones para negrita, cursiva, encabezados, listas, enlaces, imágenes, código y más. No se requiere memorizar atajos de teclado. - Panel de referencia rápida — Una hoja de trucos de sintaxis debajo del editor cubre las nueve construcciones Markdown más usadas: encabezados, negrita, cursiva, enlaces, imágenes, código en línea, listas, citas en bloque y bloques de código delimitados.
Cómo usar el Editor Markdown
Paso 1: Comenzar a escribir o cargar contenido
Cuando se carga la página, el editor contiene un documento de muestra que demuestra encabezados, texto en negrita y cursiva, una lista desordenada, un bloque de código JavaScript delimitado, una tabla, una cita en bloque y un enlace. El panel de vista previa a la derecha muestra la salida renderizada de esa muestra.
Borra el editor haciendo clic en el botón "Borrar" en la barra de acciones, o simplemente selecciona todo y comienza a escribir. La altura del editor está fijada en 600px con desplazamiento vertical habilitado para documentos más largos.
Paso 2: Escribir Markdown usando la barra de herramientas o el teclado
La barra de herramientas en la parte superior del editor incluye botones para las operaciones de formato más comunes. Haz clic en N para envolver el texto seleccionado en doble asterisco para negrita, o haz clic en C para envolverlo en asterisco simple para cursiva. Los botones de encabezado insertan prefijos #, ## o ###. Los botones de bloque de código insertan un bloque de triple tilde inversa con un marcador de posición de idioma.
Para bloques de código delimitados con resaltado de sintaxis, escribe:
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
La vista previa renderiza esto como un bloque de código coloreado. El panel de referencia rápida en la parte inferior de la página muestra los nueve patrones de sintaxis de un vistazo.
Paso 3: Verificar la salida renderizada en el panel de vista previa
El panel derecho se actualiza mientras escribes. Desplázalo independientemente del editor para revisar el documento completo. El atributo data-color-mode="auto" significa que el editor y la vista previa se adaptan automáticamente a la preferencia de modo claro u oscuro de tu sistema operativo.
Verifica que:
- Las tablas se renderizan con bordes y estilo de encabezado alternado
- Los enlaces son clicables (usan atributos
hrefen el HTML renderizado) - Los bloques de código tienen los colores de sintaxis correctos para el idioma que especificaste
- Las imágenes se muestran (si has referenciado URLs de imágenes accesibles públicamente)
Paso 4: Exportar tu documento
Elige la exportación que coincida con tu caso de uso:
- Copiar Markdown — pega el código fuente sin formato en descripciones de PR de GitHub, comentarios de Jira, páginas de Notion o cualquier campo Markdown
- Copiar HTML — pega el marcado renderizado en editores de texto enriquecido que aceptan entrada HTML
- Descargar MD — guarda
document.mden tu carpeta de Descargas - Descargar HTML — guarda
document.htmlcon estilos embebidos, listo para hospedar como una página web estática
El documento HTML exportado incluye un bloque <style> con valores predeterminados sensatos: pila de fuentes del sistema, diseño centrado max-width: 800px, fondo de código #f4f4f4, borde izquierdo de cita en bloque y tabla de ancho completo con celdas con borde.
Paso 5: Recuperar trabajo anterior con el historial
Los patrocinadores premium pueden usar el panel de Historial debajo del editor para restaurar cualquier documento guardado automáticamente anteriormente. Los usuarios no premium deben copiar o descargar su trabajo antes de navegar fuera, ya que el contenido del editor no se conserva entre sesiones.
Ejemplos prácticos
Escribir un README de proyecto
Un desarrollador está creando un README para una nueva herramienta CLI. Escribe:
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |La vista previa en vivo muestra la tabla con encabezados de columna, los bloques de código bash con resaltado de sintaxis y la jerarquía de encabezados. Hace clic en "Descargar MD" para guardar el archivo directamente en la raíz de su proyecto.
Crear una página HTML estilizada a partir de documentación
Un escritor técnico tiene un documento Markdown que describe un endpoint de API. Pega el contenido, verifica la vista previa, luego hace clic en "Descargar HTML". El document.html resultante incluye CSS embebido y se renderiza correctamente cuando se abre en un navegador o se envía como adjunto de correo electrónico — no se requiere hoja de estilo externa.
Redactar un registro de cambios de versión
Un desarrollador que escribe un registro de cambios de la versión 2.4.0 usa el editor para estructurar el documento con encabezados ## para "Cambios que rompen la compatibilidad", "Nuevas características" y "Correcciones de errores", usando listas desordenadas debajo de cada uno. Hace clic en "Copiar HTML" para pegar el contenido formateado directamente en la herramienta de gestión de versiones de su empresa, que acepta entrada HTML enriquecida.
Consejos y mejores prácticas
La barra de herramientas inserta formato alrededor del texto seleccionado. Selecciona una palabra y haz clic en el botón Negrita; la selección se convierte en palabra. Si no hay nada seleccionado, el botón inserta un marcador de posición como bold text en el cursor.
Los bloques de código delimitados requieren un identificador de idioma para el resaltado de sintaxis. Un bloque ` vacío se renderiza como texto monoespacio simple. Añade el nombre del idioma inmediatamente después de las tildes inversas de apertura ( `typescript , `sql , `yaml ) para obtener salida coloreada.
Copiar HTML captura el HTML interno de la vista previa en vivo. La función handleCopyHtml lee document.querySelector('.w-md-editor-preview')?.innerHTML. Si la vista previa aún no se ha renderizado (por ejemplo, inmediatamente después de cargar la página), el HTML copiado puede estar vacío. Espera a que se llene la vista previa antes de hacer clic en "Copiar HTML".
El HTML descargado es autónomo. El archivo document.html incluye todos los estilos necesarios en línea. Puedes enviarlo por correo electrónico, hospedarlo en un servidor de archivos estáticos o adjuntarlo a un ticket sin activos adicionales.
Borrar no pide confirmación. Hacer clic en "Borrar" vacía el editor inmediatamente. Si tienes trabajo no guardado, descárgalo o cópialo primero.
Problemas comunes y solución de problemas
"El editor muestra un indicador de carga." El componente @uiw/react-md-editor se carga de forma diferida para evitar problemas de renderizado del lado del servidor. El indicador aparece brevemente mientras se carga el paquete del editor. Debería desaparecer en uno o dos segundos con una conexión normal.
"Copiar HTML produjo una salida vacía." La función lee el innerHTML del contenedor de vista previa. Si la vista previa aún no se ha renderizado (poco común pero posible en conexiones muy lentas), esto puede devolver una cadena vacía. Desplaza el panel de vista previa para desencadenar un renderizado y luego intenta de nuevo.
"Mi tabla no se renderiza." Las tablas Markdown requieren una fila separadora de guiones entre la fila de encabezado y las filas de datos: |------|------|. Asegúrate de que cada celda en la fila de encabezado tenga una celda separadora correspondiente. Los caracteres de barra vertical (|) al inicio y al final son opcionales pero se recomiendan para consistencia.
"El código delimitado no tiene resaltado de sintaxis." Verifica que el identificador de idioma esté en la misma línea que las tildes inversas de apertura sin espacio: `javascript no ` javascript . También confirma que el nombre del idioma esté en minúsculas y bien escrito (python, no Python).
"El archivo MD descargado no tiene extensión en macOS." macOS a veces elimina la extensión .md de los archivos que no reconoce como un tipo estándar. Cambia el nombre del archivo para agregar .md después de descargarlo, o configura tu navegador para que siempre pregunte dónde guardar las descargas.
Privacidad y seguridad
Toda la renderización de Markdown, la conversión a HTML y la exportación de archivos ocurren completamente en tu navegador. Ningún contenido que escribas se transmite a los servidores de Glyph Widgets ni a terceros. El editor funciona sin conexión una vez que la página se ha cargado. Esto lo hace seguro para documentación interna, especificaciones técnicas propietarias y borradores que contienen detalles de proyectos confidenciales.
Preguntas frecuentes
¿Es gratuito el Editor Markdown? Sí, completamente gratuito sin límites de uso. No se requiere registro, suscripción ni pago de ningún tipo.
¿Funciona sin conexión? Una vez que la página se carga y el paquete del editor se inicializa, todas las funciones de escritura, vista previa y exportación funcionan sin conexión de red.
¿Están seguros mis datos? Todo lo que escribes permanece en la memoria de tu navegador. No se envía contenido a ningún servidor. Es seguro escribir documentación confidencial, referencias de API internas o notas privadas.
¿Qué variante de Markdown soporta? El editor usa @uiw/react-md-editor, que está basado en remark y soporta sintaxis CommonMark con extensiones de GitHub Flavored Markdown incluyendo tablas, listas de tareas y bloques de código delimitados con identificadores de idioma.
¿Puedo incrustar imágenes? Sí, usando la sintaxis estándar de imagen Markdown: !alt text. La imagen debe ser accesible públicamente — las rutas de archivos locales no funcionan en un contexto de navegador. La imagen se renderiza en la vista previa en vivo inmediatamente.
¿Qué idiomas se admiten en los bloques de código delimitados? La vista previa renderiza el resaltado de sintaxis para cualquier idioma que admita la canalización subyacente remark/highlight.js. Los idiomas comunes — JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON y muchos otros — todos funcionan con el identificador de idioma añadido al delimitador de apertura.
¿Necesita el archivo HTML descargado una conexión a internet? No. El document.html exportado contiene todos los estilos en línea en un bloque <style>. No se cargan frameworks CSS externos, recursos CDN ni fuentes. Se renderiza de forma idéntica sin conexión.
¿Puedo usar atajos de teclado? El componente @uiw/react-md-editor admite atajos estándar de edición de texto (Ctrl/Cmd+B para negrita, Ctrl/Cmd+I para cursiva) según la plataforma. Los botones de la barra de herramientas son la forma más confiable de insertar formato si los atajos se comportan de manera diferente en tu sistema operativo.
¿Cómo creo una lista de tareas? Usa - [ ] para un elemento sin marcar y - [x] para un elemento marcado:
- [x] Write first draft
- [ ] Review with team
- [ ] Publish¿Qué pasa con mi contenido cuando borro el editor? El editor se restablece a una cadena vacía inmediatamente. El contenido no es recuperable desde la propia herramienta a menos que hayas usado previamente el panel de Historial (función premium) o hayas copiado/descargado el contenido de antemano.
Herramientas relacionadas
JSON Formatter — Formatea datos JSON antes de incrustarlos en documentación Markdown.
Diff Checker — Compara dos versiones de un documento Markdown para encontrar qué cambió entre borradores.
Text Diff — Una herramienta de comparación enfocada en texto para auditar cambios en prosa en documentación.
Prueba el Editor Markdown ahora: Markdown Editor