Entrada HTML

Saida Pug

O que e um Conversor HTML para Pug?

Um conversor HTML para Pug transforma marcacao HTML padrao em sintaxe de template Pug. Pug substitui o HTML verboso por uma sintaxe limpa baseada em espacos em branco.

Por exemplo, <div class="hero"><p>Ola</p></div> vira div.hero p Ola. Pug e amplamente usado com Express.js.

Como converter HTML para Pug

Siga estes tres passos para transformar HTML em sintaxe Pug.

Cole ou carregue HTML

Cole seu HTML no painel esquerdo ou clique em Carregar.

Ver saida Pug

O painel direito mostra o template Pug com notacao .classe, #id e indentacao correta.

Copiar ou baixar

Clique em Copiar ou Baixar para salvar como .pug.

Quando usar este conversor

Migrar projetos Express.js

Converta templates HTML existentes para usar com Pug como motor de views no Express.

Limpar HTML verboso

A sintaxe Pug remove todas as tags de fechamento, reduzindo o arquivo em 30-50%.

Aprender sintaxe Pug

Converta HTML que voce ja conhece e veja imediatamente o equivalente Pug.

Geracao de templates prototipo

Converta saidas HTML de ferramentas de design para templates Pug para Node.js.

Perguntas frequentes

O que e a sintaxe Pug?

Pug usa indentacao em vez de tags de fechamento. Classes: div.minhaClasse. IDs: div#meuId. Atributos entre parenteses: a(href="/").

Suporta elementos aninhados?

Sim. O conversor percorre o DOM e coloca cada elemento no nivel de indentacao correto.

Como os atributos sao tratados?

Todos os atributos exceto classe e id vao entre parenteses: input(type="text").

O conteudo de texto e preservado?

Sim. O texto e colocado como conteudo inline quando nao ha elementos filhos.

Meus dados sao armazenados?

Nao. Tudo acontece no seu navegador.

Ferramentas relacionadas

Mais ferramentas para trabalhar com HTML: