Saltar ao contido principal
LibraTool logoLibraTool

Editor de Markdown de balde

Escribe e previsualiza Markdown en tempo real. Soporta cabeceiras, negrita, cursiva, bloques de código, táboas e listas.

Funciona sen conexión unha vez cargado
99 palabras · 595 caract.
Markdown
Vista previa
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Benvido ao Editor de Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Escribe <strong>Markdown</strong> á esquerda, ve a vista previa en directo á dereita.</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> e <del>táchase</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 liña</code> e 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">Ligazóns</a></li><li class="my-0.5">Listas, citas, táboas e moito máis</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Exemplo 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 foi creado por John Gruber en 2004 para facer máis fácil escribir para a 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">Títulos</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">Táboas</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 liña
- itemLista con viñetas
1. itemLista numerada
> quoteCita en bloque
[text](url)Ligazón
![alt](url)Imaxe
---Divisor

Usos habituais

  • Escribe Documentación de API en MarkdownEscribe borradores de descricións de punto final, exemplos de solicitude/resposta e táboas de parámetros en Markdown.
  • Toma Notas en MarkdownEscribe notas estruturadas en Markdown que se poidan pegar en Notion, Obsidian, Bear ou calquera aplicación Markdown.
  • Escribir GitHub README en MarkdownRedactar e vista previa de seu README do repositorio GitHub con renderizacion en directo de Markdown.
  • Escribir Documentación TécnicaEscribir e vista previa de docs API, wikis e guías técnicas en Markdown antes de publicar.
  • Escribir Publicacións de Blog en MarkdownRedactar publicacións de blog en Markdown para Ghost, Jekyll, Hugo, Hashnode e outras plataformas de publicación baseadas en Markdown.

Como funciona

A vista previa renderízase mediante un analizador de Markdown escrito a man incorporado directamente na ferramenta — sen marked, sen remark, sen biblioteca externa. Tokeniza a orixe liña por liña no navegador, convertendo a sintaxe en HTML que despois se pasa a través dun sanitizador antes de mostrarse.

  1. 1
    Tokenización liña por liña
    A función personalizada renderMarkdown divide a túa orixe en saltos de liña e percórreos nunha soa pasada, coincidindo con bloques de código con valado, títulos (H1–H6), citas en bloque, listas ordenadas e non ordenadas, táboas GFM (con aliñamento de columnas), regras horizontais e parágrafos en orde de prioridade.
  2. 2
    Expansión de sintaxe en liña
    Cada liña ou cela recollida procésase despois por inlineMarkdown, unha cadea de substitucións de expresión regular que xestiona a negra (** e __), a cursiva (* e _), a negra-cursiva (***), o riscado (~~), o código en liña (), as imaxes (![alt](url)) e as ligazóns ([texto](url)) — as imaxes resólvense antes das ligazóns para que o prefixo ! non se consuma incorrectamente.
  3. 3
    Sanitización e bloqueo de recursos remotos
    O HTML en bruto producido polo renderizador pásase a través dun sanitizador (sanitize-html) para eliminar etiquetas e atributos non seguros como <script>, manexadores onerror e hrefs javascript:. Unha segunda pasada (neutralizeRemote) substitúe os valores src de imaxes remotas por marcadores por defecto, evitando que a vista previa contacte silenciosamente con servidores externos antes de que ti o autorices.
  4. 4
    Exporta como .md ou .html autónomo
    Copiar ou descargar Markdown escribe o texto orixe en bruto. Descargar HTML envolve a saída sanitizada nun documento autocontido coa súa propia folla de estilos en liña — as clases de Tailwind só funcionan dentro do sitio, así que a exportación inclúe regras CSS simples no seu lugar, facendo que o ficheiro sexa lexible en calquera sitio.

Ferramentas relacionadas

📝

Conversor de HTML a Markdown

Converte HTML a Markdown limpo. Xestiona cabeceiras, listas, ligazóns, imaxes, bloques de código, táboas e citas. Perfecto para mover contido fóra de CMSes.

Próbao
🔄

Conversor de Markdown a HTML

Converte Markdown a HTML limpo cunha previsualización en directo. Usa a vista de código para copiar HTML listo para pegar en blogs, CMSes ou modelos de correo.

Próbao
📊

Editor de diagramas Mermaid

Crea diagramas de fluxo, diagramas de secuencia, diagramas de Gantt e máis en sintaxe Mermaid cunha previsualización en directo. Exporta como SVG ou PNG. Execútase completamente no teu navegador.

Próbao

Preguntas frecuentes