Saltar para o conteúdo principal
LibraTool logoLibraTool

Editor de Markdown grátis

Escreva e visualize Markdown em tempo real. Suporta títulos, negrito, itálico, blocos de código, tabelas e listas.

Funciona offline depois de carregado
95 palavras · 572 caracteres
Markdown
Visualização
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Bem-vindo ao Editor Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Escreva <strong>Markdown</strong> à esquerda, veja a visualização ao vivo à direita.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Recursos</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>Negrito</strong>, <em>itálico</em> e <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 inline</code> e blocos 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">Links</a></li><li class="my-0.5">Listas, citações, tabelas e muito mais</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 criado por John Gruber em 2004 para facilitar a escrita 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">Recurso</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">Suportado</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">Tabelas</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>
Guia rápido Markdown
# Heading 1H1
**bold**Negrito
*italic*Itálico
`code`Código inline
- itemLista com marcadores
1. itemLista numerada
> quoteCitação em bloco
[text](url)Link
![alt](url)Imagem
---Divisor

Usos comuns

  • Escreva Documentação de API em MarkdownRascunhe descrições de endpoints, exemplos de solicitação/resposta e tabelas de parâmetros em Markdown.
  • Faça Anotações em MarkdownEscreva notas estruturadas em Markdown que possam ser coladas em Notion, Obsidian, Bear ou qualquer aplicativo Markdown.
  • Escrever um README do GitHub em MarkdownRascunhe e visualize o README de seu repositório GitHub com renderização Markdown ao vivo.
  • Escrever Documentação TécnicaEscreva e visualize documentação de API, wikis e guias técnicos em Markdown antes de publicar.
  • Escrever Postagens de Blog em MarkdownRascunhe postagens de blog em Markdown para Ghost, Jekyll, Hugo, Hashnode e outras plataformas de publicação baseadas em Markdown.

Como funciona

A pré-visualização é renderizada por um analisador Markdown escrito à mão construído diretamente na ferramenta — sem marked, sem remark, sem biblioteca externa. Tokeniza a fonte linha por linha no navegador, convertendo a sintaxe em HTML que depois passa por um sanitizador antes de ser exibido.

  1. 1
    Tokenização linha por linha
    A função personalizada renderMarkdown divide a sua fonte por novas linhas e percorre-as numa única passagem, correspondendo blocos de código delimitados, títulos (H1–H6), citações em bloco, listas ordenadas e não ordenadas, tabelas GFM (com alinhamento de coluna), regras horizontais, e parágrafos por ordem de prioridade.
  2. 2
    Expansão de sintaxe inline
    Cada linha ou célula recolhida é depois processada por inlineMarkdown, uma cadeia de substituições regex que trata negrito (** e __), itálico (* e _), negrito-itálico (***), rasurado (~~), código inline (), imagens (![alt](url)), e links ([text](url)) — as imagens são resolvidas antes dos links para que o prefixo ! não seja consumido incorretamente.
  3. 3
    Sanitização e bloqueio de recursos remotos
    O HTML bruto produzido pelo renderizador passa por um sanitizador (sanitize-html) para remover tags e atributos inseguros como <script>, manipuladores onerror, e hrefs javascript:. Uma segunda passagem (neutralizeRemote) substitui valores src de imagem remota por marcadores por padrão, evitando que a pré-visualização contacte silenciosamente servidores externos antes de optar por isso.
  4. 4
    Exportar como .md ou .html autónomo
    Copiar ou baixar Markdown escreve o texto fonte bruto. Baixar HTML envolve a saída sanitizada em um documento autocontido com sua própria folha de estilo inline — as classes Tailwind só funcionam dentro do site, por isso a exportação agrupa regras CSS simples em vez disso, tornando o arquivo legível em qualquer lugar.

Ferramentas relacionadas

📝

Conversor de HTML para Markdown

Converta HTML em Markdown limpo. Lida com títulos, listas, links, imagens, blocos de código, tabelas e citações. Perfeito para mover conteúdo de CMSes.

Experimentar
🔄

Conversor de Markdown para HTML

Converta Markdown em HTML limpo com visualização ao vivo. Use a visualização de origem para copiar HTML pronto para colar para blogs, CMSes ou modelos de e-mail.

Experimentar
📊

Editor de Diagramas Mermaid

Escreva fluxogramas, diagramas de sequência, gráficos de Gantt e muito mais na sintaxe Mermaid com pré-visualização ao vivo. Exporte como SVG ou PNG. Executa inteiramente no seu navegador.

Experimentar

Perguntas frequentes