Saltar al contenido principal
LibraTool logoLibraTool

Editor de Markdown gratis

Escribe y previsualiza Markdown en tiempo real. Admite encabezados, negrita, cursiva, bloques de código, tablas y listas.

Funciona sin conexión una vez cargado
99 palabras · 598 caracteres
Markdown
Vista previa
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Bienvenido al Editor de Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Escribe <strong>Markdown</strong> a la izquierda, ve la vista previa en vivo a la derecha.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Características</h3> <ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Negrita</strong>, <em>cursiva</em> y <del>tachado</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Código en línea</code> y bloques de código delimitados</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Enlaces</a></li><li class="my-0.5">Listas, citas, tablas y más</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Ejemplo de código</h3> <pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; }</code></pre> <blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown fue creado por John Gruber en 2004 para facilitar la escritura para la web.</blockquote> <table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Característica</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Compatible</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Encabezados</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Listas</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tablas</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Código</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Guía rápida de Markdown
# Heading 1H1
**bold**Negrita
*italic*Cursiva
`code`Código en línea
- itemLista con viñetas
1. itemLista numerada
> quoteCita en bloque
[text](url)Enlace
![alt](url)Imagen
---Divisor

Usos habituales

  • Escribe documentación de API en MarkdownBorra descripciones de punto final, ejemplos de solicitud/respuesta y tablas de parámetros en Markdown.
  • Toma notas en MarkdownEscribe notas estructuradas en Markdown que pueden pegarse en Notion, Obsidian, Bear o cualquier aplicación Markdown.
  • Escribir un README de GitHub en MarkdownRedacta y visualiza el README de tu repositorio GitHub con representación en vivo de Markdown.
  • Escribir documentación técnicaEscribe y visualiza documentación de API, wikis y guías técnicas en Markdown antes de publicar.
  • Escribir entradas de blog en MarkdownRedacta entradas de blog en Markdown para Ghost, Jekyll, Hugo, Hashnode y otras plataformas de publicación basadas en Markdown.

Cómo funciona

La vista previa la renderiza un analizador de Markdown escrito a mano integrado directamente en la herramienta: sin marked, sin remark, sin biblioteca externa. Tokeniza la fuente línea por línea en el navegador, convirtiendo la sintaxis en HTML que luego pasa por un sanitizador antes de mostrarse.

  1. 1
    Tokenización línea por línea
    La función personalizada renderMarkdown divide tu fuente por saltos de línea y las recorre en una sola pasada, buscando bloques de código con vallas, encabezados (H1–H6), citas en bloque, listas ordenadas y no ordenadas, tablas GFM (con alineación de columnas), reglas horizontales y párrafos en orden de prioridad.
  2. 2
    Expansión de sintaxis en línea
    Cada línea o celda recopilada se procesa luego con inlineMarkdown, una cadena de sustituciones por expresión regular que gestiona negrita (** y __), cursiva (* y _), negrita-cursiva (***), tachado (~~), código en línea (), imágenes (![alt](url)), y enlaces ([texto](url)); las imágenes se resuelven antes que los enlaces para que el prefijo ! no se consuma incorrectamente.
  3. 3
    Sanitización y bloqueo de recursos remotos
    El HTML en bruto producido por el renderizador pasa por un sanitizador (sanitize-html) para eliminar etiquetas y atributos inseguros como <script>, manejadores onerror, y hrefs javascript:. Una segunda pasada (neutralizeRemote) sustituye los valores src de imágenes remotas por marcadores de posición por defecto, evitando que la vista previa llame silenciosamente a servidores externos antes de que lo permitas.
  4. 4
    Exporta como .md o .html independiente
    Copiar o descargar Markdown escribe el texto fuente en bruto. Descargar HTML envuelve la salida sanitizada en un documento autocontenido con su propia hoja de estilo en línea; las clases de Tailwind solo funcionan dentro del sitio, así que la exportación incluye reglas CSS planas en su lugar, haciendo que el archivo sea legible en cualquier lugar.

Herramientas relacionadas

📝

Convertidor de HTML a Markdown

Convierte HTML en Markdown limpio. Admite encabezados, listas, enlaces, imágenes, bloques de código, tablas y citas en bloque. Perfecto para sacar contenido de un CMS.

Probar
🔄

Convertidor de Markdown a HTML

Convierte Markdown en HTML limpio con vista previa en vivo. Usa la vista de código fuente para copiar HTML listo para pegar en blogs, CMS o plantillas de correo electrónico.

Probar
📊

Editor de Diagramas Mermaid

Escribe diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más con sintaxis Mermaid y una vista previa en tiempo real. Exporta como SVG o PNG. Se ejecuta completamente en tu navegador.

Probar

Preguntas frecuentes