Conversor HTML para Pug
Converta HTML para a sintaxe indentada do Pug (antigo Jade), sem tags de fechamento. Cole o HTML e veja a versão Pug — ideal para templates de Node.js e Express.
Copiado!
Para HTML bem-formado. Não cobre <script>/<style> com conteúdo nem tags mal-fechadas.
Cada tag HTML vira o nome do elemento sem <>, e o aninhamento é feito por indentação.
<ul><li>Item</li></ul> → ul\n li Item
Atributos: <a href="/x"> → a(href="/x"). Classes: div.classe. IDs: div#meu-id.
Do HTML fechado para a indentação do Pug
Você entrou num projeto Express que renderiza Pug e recebeu um bloco de HTML pronto: um card do Bootstrap, um trecho de landing page, o rodapé do site antigo. Reescrever à mão significa apagar cada tag de fechamento e contar indentação linha por linha, e basta errar dois espaços para o layout desabar. Aqui você cola o HTML de um lado e a versão Pug aparece do outro enquanto digita.
A conversão roda num parser próprio, sem usar o DOM do navegador. O id e as classes saem no atalho de seletor (div#c1.card.ativo), os demais atributos entram entre parênteses e tags vazias como img, br e input não abrem bloco. Quando o elemento tem só texto, ele fica na mesma linha (h2 Oi); quando mistura texto e tags, o texto vira linha começando com barra vertical. Um detalhe: a linha do DOCTYPE não vira doctype html, sai como texto comum e você apaga.
Feche todas as tags antes de colar. Um item de lista sem a tag de fechamento é HTML válido, mas aqui o item seguinte entra aninhado dentro do anterior. Script e style com conteúdo também não sobrevivem, como o próprio campo avisa. Atributos de Vue e Alpine perdem o prefixo: @click vira click e :class é lido como class comum. Nada sai do navegador, o texto colado não vai para servidor nenhum.
Perguntas frequentes
Pug e Jade são a mesma linguagem?
Dá para converter Pug de volta para HTML?
Como fica texto misturado com tags inline?
Ferramentas Relacionadas
Conversor HTML para HAML
Converta HTML para a sintaxe indentada do HAML, sem tags de fechamento. Cole o HTML e copie o HAML — ideal para views de projetos Ruby on Rails.
Conversor JSX para HTML
Converte sintaxe JSX (React) para HTML padrão substituindo className por class e atributos camelCase em kebab-case.
HTML para JSX
Converta HTML para JSX do React automaticamente. Transforma class→className, for→htmlFor, converte atributos para camelCase e fecha tags vazias.