Pular para o conteúdo
Numio

Converter HTML em modelos Pug — Numio

Converta HTML em sintaxe de template Pug (antigo Jade), que usa indentação em vez de tags de fechamento. Alterne entre documento completo e fragmento HTML, e escolha tabs, vírgulas e estilo de aspas. O HTML é enviado ao servidor para a conversão.

Começar um template Pug a partir de um markup HTML existente.

O processamento é feito localmente no navegador; os dados não são enviados. A entrada pode permanecer nesta aba ao trocar de ferramenta; apague-a em dispositivos compartilhados.
Pug output options
Load an example (replaces your input)

HTML

Pug

Quando usar

  • Começar um template Pug a partir de um markup HTML existente.
  • Conferir em um trecho curto como atributos e aninhamento são mapeados para Pug antes de converter uma página inteira.

Como usar

  1. Cole HTML ou carregue um exemplo (fragmento HTML, atributos de formulário, documento HTML). Carregar um exemplo substitui sua entrada.
  2. Ative o modo fragmento para converter só o trecho, sem os wrappers html, head e body. O exemplo abaixo usa o modo fragmento com tabs e vírgulas ativados e aspas duplas desativadas.
  3. Copie o Pug e compile-o com o seu setup de Pug para conferir o HTML renderizado.

Entrada HTML

<section class="card"><h2>News</h2><p>Registration is open</p></section>

Saída Pug (modo fragmento, tabs e vírgulas ativados)

section.card
	h2 News
	p Registration is open

Detalhes e limitações

Com o modo fragmento desativado, o HTML é tratado como documento e html, head e body podem ser adicionados. Ative-o quando precisar só dos elementos.

Misturar tabs e espaços pode mudar as relações pai–filho no Pug. Siga o estilo de indentação do seu projeto.

HTML repetido não é transformado em loops each, mixins ou variáveis do Pug, e CSS, imagens e scripts externos não são incluídos.

O parser de HTML pode corrigir tags incompletas. Uma conversão bem-sucedida não valida o HTML nem garante uma página idêntica.

FAQ

Por que as tags html e body são adicionadas?

No modo documento, o parser completa os elementos externos. Ative o modo fragmento para converter o HTML de um componente sem wrappers.

Posso converter HTML para Pug no VS Code ou pela linha de comando?

Esta página executa o pacote open source html2pug. Instale-o pelo npm para converter arquivos em um script ou pela linha de comando, ou continue usando esta página para trechos rápidos.

Como transformo Pug de volta em HTML?

Esta página só converte HTML para Pug. Compile o template com o próprio Pug — por exemplo, com o pacote pug-cli — para obter HTML de novo.

Meu HTML é enviado?

Sim, ele é enviado ao servidor douni.one para ser convertido. Use código que você pode compartilhar e remova antes chaves de API ou dados de clientes.

Especificações e referências