Markdown → HTML

Markdown convertido em HTML limpo e semântico. Grátis, sem upload. 1 GB máx. · Até 1 GB · Processado localmente, nunca enviado para um servidor.

O Markdown serve para escrever, o HTML serve para publicar, e alguém tem de fazer a ponte entre os dois. O pedido nasce quase sempre de uma necessidade concreta: colar um artigo num sistema de publicação que só aceita HTML, produzir uma página de documentação legível sem instalar um gerador de sites, ou ver com que cara vai ficar um ficheiro de apresentação antes de o pôr online.

A ferramenta pega no texto escrito no campo ou importado de um ficheiro .md, entrega-o à biblioteca marked e mostra o resultado logo por baixo. São propostas duas saídas: uma página HTML completa e autónoma, para transferir, ou apenas o fragmento, copiado para a área de transferência e pronto a colar num modelo já existente.

Há um ponto que vale a pena conhecer antes de começar. O HTML produzido passa por um filtro, tanto para a pré-visualização como para a transferência. Se o seu Markdown contiver etiquetas HTML escritas à mão, uma parte é conservada e outra é retirada. A lista exata está mais abaixo, juntamente com a variante de Markdown reconhecida e com as sintaxes correntes que não fazem parte dela.

Como utilizar

  1. Escreva ou importe o Markdown Escreva diretamente no campo, cole o seu texto, ou use o botão de importação para carregar um ficheiro .md ou .markdown, cujo conteúdo substitui aquilo que estiver no campo.
  2. Carregue em Executar O botão carrega a marked na primeira utilização e mostra o resultado por baixo do campo. O texto continua editável: corrija e volte a converter as vezes que forem precisas.
  3. Confira a pré-visualização Títulos, listas, tabelas e blocos de código aparecem tal como vão ser produzidos. Um título que fique em texto simples denuncia um cardinal a que falta o espaço a seguir.
  4. Transfira a página completa O ficheiro document.html basta-se a si próprio: declaração de tipo de documento, codificação UTF-8, atributo de idioma, etiqueta de visualização para telemóvel e folha de estilos incorporada. Não é preciso nenhum ficheiro externo.
  5. Ou copie só o fragmento O segundo botão coloca na área de transferência o conteúdo sem cabeçalho e sem formatação, que é a forma esperada pela maior parte dos sistemas de publicação.

A variante de Markdown que é reconhecida

A marked aplica por predefinição a variante conhecida por GitHub Flavored Markdown. Além da sintaxe de base — títulos, negrito, itálico, listas encadeadas, citações, hiperligações, imagens e filetes horizontais —, tem à disposição tabelas com alinhamento por coluna, texto rasurado entre til duplo, caixas de seleção de lista de tarefas e blocos de código delimitados por três acentos graves. Um endereço escrito em texto simples torna-se uma hiperligação. A linguagem indicada a seguir aos acentos graves acaba como classe na etiqueta de código, sem coloração sintática aplicada.

Há três comportamentos que apanham as pessoas desprevenidas com regularidade. Uma mudança de linha simples não corta o parágrafo: duas linhas consecutivas são reunidas, a menos que a primeira termine com dois espaços. Os títulos são produzidos sem identificador de âncora, pelo que um índice escrito à mão não encontra nenhum dos seus destinos. E as notas de rodapé, as listas de definições e os blocos de metadados no topo do ficheiro não são tratados; estes últimos saem como um filete horizontal seguido de um título de segundo nível.

O HTML que escreve dentro do seu Markdown

A sintaxe Markdown permite inserir etiquetas HTML no meio do texto, e a marked deixa-as passar tal e qual. Um filtro intervém a seguir, antes da pré-visualização tal como antes da transferência, e retira sempre os mesmos elementos: scripts, molduras integradas, objetos incorporados, formulários, blocos noscript e etiquetas de cabeçalho de documento. Os atributos de evento são removidos, tal como as hiperligações cujo endereço comece por javascript, data ou vbscript, com a única exceção das imagens codificadas em base64.

Todo o resto é conservado: uma tabela escrita à mão, um bloco desdobrável, expoentes, abreviaturas, contentores com as suas classes e as suas imagens atravessam a conversão sem estragos. Já um vídeo integrado através de uma moldura desaparece; acrescente essa integração depois, a partir do seu sistema de publicação.

A página transferida e o que falta fazer-lhe

O ficheiro que recebe basta-se a si próprio: transporta a sua formatação, não pede nenhum tipo de letra nem nenhum script exterior e abre sem ligação à internet. A apresentação é sóbria: coluna de 760 píxeis centrada na página, texto em Georgia, títulos em Helvetica, blocos de código sobre fundo cinzento claro, tabelas de filetes finos, imagens reduzidas à largura do texto.

Ficam três retoques a seu cargo. O título do documento é Document e o ficheiro chama-se sempre document.html: abra-o num editor para mudar a etiqueta de título e mudar-lhe o nome. O atributo de idioma no elemento html está definido como fr, por isso troque-o pelo código da sua língua antes de publicar, tanto pelos leitores de ecrã como pelos motores de busca. As imagens conservam o caminho que escreveu; um caminho relativo pressupõe que a pasta correspondente acompanha a página, ao passo que um endereço completo funciona tal como está.

Artigo de blogue, documentação, e o que a ferramenta não faz

Para um artigo de blogue, use o botão que copia o fragmento: a maior parte dos sistemas de publicação espera apenas o conteúdo e aplica o seu próprio modelo, ao passo que colar-lhes uma página completa produziria um documento encaixado dentro de outro. Para uma nota a entregar ou a arquivar, a página completa é a escolha melhor.

Para um site de documentação propriamente dito, com navegação entre páginas e índice automático, um gerador de sites estáticos continua a ser a ferramenta indicada: aqui cada ficheiro é convertido à parte e nada liga as páginas umas às outras. O texto que escreve não sai da página, sendo apenas a biblioteca marked recolhida do próprio site; o histórico local guarda a menção de que houve uma conversão e o número de palavras do texto de origem.

Perguntas frequentes

Porque é que as minhas mudanças de linha desaparecem?

A marked segue a regra original do Markdown, segundo a qual uma mudança de linha simples não corta o parágrafo. Termine a linha com dois espaços para forçar a quebra, ou deixe uma linha em branco entre as duas.

Porque é que o meu bloco de código não tem cores?

A linguagem indicada a seguir aos acentos graves torna-se uma classe na etiqueta de código, mas não é aplicada coloração nenhuma. Acrescente uma biblioteca de coloração sintática à página final, se quiser cor.

Porque é que a minha integração de vídeo desapareceu?

As molduras integradas fazem parte dos elementos retirados pelo filtro, juntamente com os scripts, os objetos incorporados e os formulários. Publique o HTML sem o vídeo e acrescente depois a integração a partir da sua ferramenta de publicação.

Porque é que as hiperligações do meu índice não levam a lado nenhum?

Os títulos são produzidos sem identificador de âncora. Coloque uma âncora em HTML antes de cada título, ou deixe o seu sistema de publicação gerar os identificadores no momento de mostrar a página.

O meu bloco de metadados aparece dentro da página, é normal?

É. Um bloco de metadados no topo do ficheiro não é reconhecido como tal: o filete de cima torna-se uma linha horizontal e a linha seguinte torna-se um título de segundo nível. Retire esse bloco antes de converter.

Posso tratar vários ficheiros .md de seguida?

Cada importação substitui o conteúdo do campo, por isso as conversões fazem-se uma a uma. Como o campo continua editável, também pode colar ali vários documentos uns a seguir aos outros.

Consigo converter o README do meu projeto em HTML limpo?

Sim. A marked aplica a variante GitHub Flavored Markdown, pelo que tabelas com alinhamento por coluna, blocos de código delimitados por três acentos graves, texto rasurado e listas de tarefas passam sem retoques, e um endereço escrito em texto simples torna-se uma hiperligação. Os distintivos e as capturas de ecrã conservam o caminho que escreveu: um endereço completo funciona tal como está, ao passo que um caminho relativo pressupõe que a pasta das imagens acompanhe o ficheiro HTML.

O meu ficheiro .md é enviado para algum servidor?

Não. O texto que escreve ou importa fica dentro da página e a conversão é feita ali mesmo; só a biblioteca marked é recolhida do próprio site, na primeira utilização. O histórico local guarda apenas a menção de que houve uma conversão e o número de palavras do texto de origem, nunca o texto.

A página HTML transferida fica em português?

Fica, na parte que a ferramenta controla: o ficheiro sai com o atributo de idioma do elemento html definido como pt e com o título Documento, porque ambos acompanham a língua da interface. Sobram dois retoques manuais, e são de nome: o título é genérico e o ficheiro chama-se sempre document.html, por isso abra-o num editor e dê-lhe o título e o nome verdadeiros antes de publicar. De resto basta-se a si próprio — leva a formatação incorporada e abre sem ligação à internet.

Ferramentas semelhantes

Descobrir outras ferramentas

Categorias