Conversor Markdown para HTML & Preview

Conversor Markdown para HTML & Preview

Converta Markdown para HTML limpo e pronto para produção em tempo real. Com tabelas GFM, realce de sintaxe, proteção XSS, cópia Rich Text e exportação.

Modelos Prontos
Dialeto Markdown:
Formato de Exportação:
Editor Markdown
Linhas: 31Palavras: 125Caracteres: 885Bytes: 885
Tempo de Compilação: 3ms

Turbopack Build Optimizer

Build Status License: MIT

A next-generation zero-config build toolkit for modern web applications.

Feature Matrix

| Capability | Classic Webpack | Turbopack Native |
| :— | :—: | :—: |
| Cold Start (10k modules) | 8.4s | 1.2s |
| HMR Update Latency | 320ms | 18ms |
| Memory Footprint | 640 MB | 180 MB |

Roadmap & Progress

  • Rust-powered AST parsing engine
  • WebAssembly parallel sourcemap bundler
  • Edge runtime hot-reload socket connection
  • Automated polyfill treeshaking
# Install Turbopack globally
npm install -g @toolsaa/turbopack-cli

# Run dev benchmark
turbopack dev –port 3000
Tamanho do HTML: 3424 bytesCompilado com Sucesso: 100%
Livre de Ameaças XSS
Tempo de Compilação3 ms
Higienização XSSSanitização Rigorosa (Anti-XSS)
Formato de Exportaçãostandalone
Processamento no Navegador

Compilação ultrarrápida executada inteiramente na memória local sem sobrecarga.

Zero Envio a Servidores

Seus dados permanecem estritamente locais, sem qualquer tráfego externo.

Pronto para Produção

Código HTML limpo, semântico e formatado para implantação imediata.

Referência técnica e guia de arquitetura

Conversor Markdown para HTML & Preview — Guia de referência

Converta Markdown em código HTML semântico e pronto para produção em tempo real. Suporte a tabelas GFM, realce de sintaxe, sanitização contra XSS e exportação completa.

Conversor Markdown para HTML & Preview — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados
Conversor Markdown para HTML & Preview — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados

Parâmetros-chave e controles

Código-Fonte Markdown Bruto (rawMarkdownSource)String (RFC 7763 text/markdown)

Fluxo de entrada UTF-8 bruto em conformidade com as gramáticas CommonMark ou GitHub Flavored Markdown (GFM). A tokenização do analisador léxico processa os caracteres em tempo linear determinístico O(n) com lookahead delimitado, isolando blocos de frontmatter, estruturas em nível de bloco e spans inline dentro de um Web Worker isolado.

Padrão: Auto
Dialeto Markdown (markdownDialectMode)Enum [gfm | commonmark | minimal]

Define a especificação léxica e a construção da AST: 'gfm' habilita extensões do GitHub Flavored Markdown (tabelas com pipe, tachado, links automáticos, listas de tarefas); 'commonmark' impõe conformidade estrita com a especificação CommonMark 0.31.2; 'minimal' analisa citações e cabeçalhos básicos, desabilitando extensões aninhadas complexas.

Padrão: gfm
Modo de Exportação HTML (htmlExportMode)Enum [fragment | standalone | email-inline]

Configura o escopo de serialização dos nós compilados do DOM: 'fragment' gera elementos HTML semânticos internos (<article>); 'standalone' compila um documento W3C HTML5 completo com <!DOCTYPE html>, metadados e tags de viewport; 'email-inline' converte regras CSS em estilos inline compatíveis com clientes de e-mail (RFC 5322).

Padrão: fragment
Política de Sanitização XSS (xssSanitizationPolicy)Enum [strict-sanitized | trusted-raw]

Aplica sanitização recursiva na árvore DOM via DOMPurify e DOMParser do navegador. Cria lista de permissões para esquemas seguros (http:, https:, mailto:), remove scripts executáveis, iframes, tags object e atributos de eventos inline (onload, onerror, onclick), prevenindo ataques de Stored XSS e violações de CSP.

Padrão: strict-sanitized
Geração de Âncoras em Títulos (headingAnchorPolicy)Enum [kebab-slug | numeric-id | none]

Controla a geração automatizada de atributos id nas tags <h1>–<h6>. 'kebab-slug' converte o texto do cabeçalho em hífens ASCII minúsculos conforme os padrões de fragmentos de URI da RFC 3986 para links internos; 'numeric-id' atribui identificadores numéricos sequenciais.

Padrão: kebab-slug
Segurança de Links Externos (externalLinkPolicy)Boolean

Injeta rel="noopener noreferrer" e target="_blank" em todos os links âncora (<a>) externos cujo domínio seja diferente de window.location.hostname, neutralizando ataques de reverse tabnabbing através da manipulação do objeto window.opener.

Padrão: true
Extração de Frontmatter (frontmatterExtraction)Boolean

Isola e remove metadados iniciais delimitados por traços triplos (---) ou sinais de adição (+++) antes da compilação do Markdown. Serializa pares chave-valor YAML/TOML em objetos estruturados, impedindo que delimitadores de frontmatter vazem para o corpo do HTML compilado.

Padrão: true
Tipografia Inteligente e Pontuação (smartTypography)Boolean

Executa substituições determinísticas via regex para converter aspas retas ASCII em aspas tipográficas curvas (&ldquo;/&rdquo;, &lsquo;/&rsquo;), hífens duplos/triplos em travessões (&ndash;/&mdash;) e pontos consecutivos em reticências (&hellip;), preservando blocos de código sem mutações.

Padrão: true

Dicas profissionais e melhores práticas

A Compilação de Tabelas GFM Exige Linhas Separadoras de Cabeçalho Explícitas

No GitHub Flavored Markdown (GFM §4.10) e nas extensões de tabela CommonMark, uma tabela ASCII só é convertida em um elemento semântico <table> se houver uma linha delimitadora logo abaixo do cabeçalho. Essa linha precisa conter pelo menos três hífens por coluna (ex.: '| :--- | :---: | ---: |'). Os dois-pontos definem o alinhamento: à esquerda (:---), centralizado (:---:) e à direita (---:). Omitir essa linha, não deixar uma linha em branco anterior ou esquecer de escapar barras verticais (\|) no texto faz o parser abortar o estado de tabela e exibir o conteúdo como texto de parágrafo bruto.

Prevenção de Ataques XSS Armazenados por Meio de Links e Imagens Markdown

As especificações do Markdown permitem tags HTML brutas e protocolos de URI arbitrários por padrão, o que introduz riscos graves de Cross-Site Scripting (XSS). Vetores comuns incluem URLs maliciosas como [Payload](javascript:alert(document.domain)) ou imagens com URIs data: e arquivos SVG com scripts embutidos. Aplicações web no navegador nunca devem injetar a saída do compilador diretamente no innerHTML. Sempre processe o DOM gerado através de um sanitizador robusto como o DOMPurify ou a API nativa HTML Sanitizer com listas restritas de protocolos (http:, https:, mailto:) e regras rígidas de CSP Level 3.

Preservação de Quebras de Linha: Dois Espaços vs Sintaxe de Barra Invertida

De acordo com a seção 6.7 do CommonMark, uma quebra de linha simples no final de uma frase dentro de um parágrafo é tratada como quebra suave (soft break) e convertida em um único espaço ASCII (0x20) no HTML compilado. Para forçar uma quebra de linha rígida (<br />), é necessário finalizar a linha com dois ou mais espaços antes do Enter ou terminar a linha com uma barra invertida (\). Em pipelines automatizados, habilitar a opção breaks: true no compilador transforma todas as quebras simples em tags <br />, o que é essencial para chats, logs e newsletters.

Armadilhas de Escopo de CSS ao Inserir HTML em Frameworks Modernos

Exportar fragmentos HTML sem escopo isolado para frameworks modernos baseados em componentes (React, Next.js, Vue) costuma causar conflitos de especificidade CSS, onde resets globais afetam a marcação injetada ou classes de tabelas corrompem o layout da página. Sempre envolva o HTML gerado em um contêiner com namespace próprio (por exemplo, <article class="markdown-body">) com variáveis CSS encapsuladas, ou selecione o modo 'Documento HTML5 Completo', que inclui folhas de estilo isoladas compatíveis com a especificação CSS Containment Module Level 2.

Armadilhas comuns e solução de problemas

⚠️As tabelas Markdown aparecem como texto puro com barras verticais em vez de tags <table> HTML

Verifique se a tabela inclui uma linha divisória de cabeçalho válida com pelo menos três hífens por coluna (ex.: '| --- | --- |') logo abaixo da primeira linha. Certifique-se também de que haja uma linha em branco antes do bloco da tabela; os analisadores sintáticos do CommonMark e do GFM exigem uma quebra vazia para encerrar os tokens do parágrafo anterior antes de iniciar o autômato de reconhecimento da tabela.

⚠️Tags HTML como <div> ou <span> são convertidas nas entidades literais &lt;div&gt; no HTML gerado

Isso ocorre quando a Política de Sanitização XSS está configurada no modo de escape estrito ou quando o compilador Markdown está com a opção html: false ativada. Para renderizar elementos HTML legítimos dentro do Markdown, certifique-se de que a política de sanitização permita tags seguras enquanto bloqueia scripts ativos, e confirme que as tags HTML não estão indentadas com 4 espaços ou tabulação, o que acionaria o modo de bloco de código indentado.

⚠️Blocos de código delimitados são renderizados como texto simples sem destaque de sintaxe colorido

Por padrão, compiladores de Markdown geram apenas a estrutura semântica HTML (como <pre><code class="language-typescript">...</code></pre>) e não incluem regras de cores CSS. Para exibir o realce visual de tokens, inclua uma folha de estilos de syntax highlighting no documento hospedeiro (como o CSS do Prism.js ou Highlight.js) ou alterne o modo de exportação para 'Documento HTML5 Completo', que injeta definições de temas prontas para uso.

⚠️Texto com recuo dentro de itens de lista vira acidentalmente um bloco de código isolado

Conforme o CommonMark §4.4, indentar uma linha com 4 espaços ou 1 tab em relação ao nível do marcador da lista indica ao analisador que se trata de um bloco de código indentado. Para formatar parágrafos adicionais ou conteúdos contínuos dentro do mesmo item <li>, use exatamente 2 espaços de recuo (alinhando com o marcador da lista), mantendo-se abaixo do limite de 4 espaços.

Perguntas frequentes (FAQ)

Como converter Markdown para HTML em JavaScript?▼

Para converter Markdown para HTML em JavaScript, processe a string de entrada gerando uma árvore de sintaxe abstrata (AST) e compile-a para HTML utilizando bibliotecas consolidadas como marked ou markdown-it. Em código ES6+: import { marked } from 'marked'; const rawHtml = marked.parse(markdownText, { gfm: true, breaks: true });. Antes de injetar o HTML resultante no DOM via innerHTML, aplique sempre DOMPurify.sanitize(rawHtml) para neutralizar vulnerabilidades de Cross-Site Scripting (XSS).

Qual é a diferença entre CommonMark e GitHub Flavored Markdown (GFM)?▼

O CommonMark é a especificação formal e padronizada do Markdown criada para eliminar divergências de interpretação entre diferentes mecanismos de compilação. Já o GitHub Flavored Markdown (GFM) é uma extensão e superset formal do CommonMark 0.29 focado no fluxo de trabalho de desenvolvedores. O GFM introduz suporte nativo a tabelas com barras (| col |), listas de tarefas com checkboxes (- [ ] / - [x]), detecção automática de URLs (autolinks), texto tachado (~~texto~~) e blocos de código cercados com identificadores de linguagem.

Como criar tabelas em Markdown para gerar tags HTML <table>?▼

Para gerar uma tag <table> HTML válida em Markdown, crie uma linha de cabeçalho com células separadas por barras verticais (|), seguida de uma linha delimitadora obrigatória contendo pelo menos três hífens por coluna. Exemplo: '| Parâmetro | Padrão |' seguido por '| :--- | ---: |' e as linhas de dados '| Timeout | 5000ms |'. O uso de dois-pontos determina o alinhamento: ':---' alinha à esquerda, ':---:' centraliza e '---:' alinha à direita. O compilador converte essa sintaxe nas tags semânticas <table>, <thead>, <tbody>, <tr>, <th> e <td>.

Como prevenir ataques XSS ao renderizar Markdown para HTML?▼

A prevenção contra Cross-Site Scripting (XSS) na conversão de Markdown requer uma estratégia de defesa em profundidade. Primeiro, configure o compilador para desativar HTML bruto irrestrito ou bloquear esquemas perigosos de URI. Segundo, passe a string HTML compilada por uma biblioteca de sanitização consagrada como o DOMPurify ou pela W3C Sanitizer API, que remove recursivamente tags perigosas (<script>), objetos embutidos, manipuladores de eventos inline (onload, onerror) e pseudoprotocolos maliciosos (javascript:, data:text/html).

Como exportar Markdown como um documento HTML5 completo e estilizado?▼

Para exportar o Markdown como uma página HTML completa, envolva o fragmento compilado em um documento HTML5 com <!DOCTYPE html>, <html lang="pt-BR">, metatags de charset UTF-8 e viewport no <head>, além de folhas de estilo tipográficas. Neste conversor, selecione a opção de exportação 'Documento HTML5 Completo' para obter um arquivo autocontido com estilos responsivos elegantes inspirados no GitHub e suporte a temas claro e escuro.

Por que quebras de linha no Markdown não viram quebras no HTML?▼

Na especificação padrão CommonMark §6.7, quebras de linha individuais dentro de parágrafos são interpretadas como 'soft breaks' (quebras suaves) e consolidadas em um único espaço em branco na saída HTML, permitindo organizar o código-fonte sem quebrar o fluxo do texto. Para criar uma quebra de linha rígida (<br />), insira dois espaços no fim da linha antes de pressionar Enter, finalize a linha com uma barra invertida (\) ou ative a opção breaks: true no compilador.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Analisador Cron & Testador de CrontabDesenvolvimento

Interprete expressões cron em linguagem natural legível. Inspecione próximas execuções em múltiplos fusos horários, valide sintaxe crontab e projete agendamentos futuros.

Abrir ferramenta→
Gerador de GraphQL para TypeScriptDesenvolvimento

Converta esquemas SDL e consultas GraphQL em tipos, interfaces, enums e resolvers TypeScript. Codegen instantâneo no navegador, sem configurações ou envio ao servidor.

Abrir ferramenta→
Conversor HTML para Markdown (GFM)Desenvolvimento

Converta HTML para Markdown com tabelas GFM, blocos de código e suporte a capturas web. Remova estilos inline e exporte arquivos .md limpos.

Abrir ferramenta→
Comparador de Texto & Diff CheckerDesenvolvimento

Compare textos, códigos e arquivos com nosso verificador de diff ultrarrápido. Inspecione alterações lado a lado ou em linha, ignore espaços e exporte patches unificados.

Abrir ferramenta→
Gerador de Tags Canônicas & URLsDesenvolvimento

Gere tags rel=canonical e cabeçalhos HTTP válidos. Remova parâmetros de rastreamento, normalize URLs e resolva problemas de conteúdo duplicado no SEO.

Abrir ferramenta→
Conversor cURL para Fetch (JS & Node)Desenvolvimento

Converta comandos cURL em código Fetch API instantaneamente. Processe cabeçalhos HTTP, tokens de autenticação, cookies e payloads JSON com async/await moderno.

Abrir ferramenta→