Pug para HTML quando precisa de ver o modelo antes de colar
Pug (e a sintaxe Jade mais antiga) troca parênteses angulares por indentação. É agradável — até estar a olhar para vinte linhas de etiquetas aninhadas e tentar lembrar se `nav.main-nav` fechou corretamente três níveis acima. A solução habitual é a CLI `pug` numa máquina com Node. Esta página faz o passo de compilação no separador que já tem aberto. Cole um excerto, carregue um ficheiro `.pug` ou `.jade` e leia o HTML à direita enquanto edita. A compilação corre localmente após carregar a página — nada é enviado a um servidor para transformar. O que distingue esta bancada de um conversor «colar e rezar» é a pré-visualização: passa do markup cru à vista renderizada da página compilada e apanha erros de layout antes do HTML ir para um CMS, ferramenta de email ou repositório de um colega.
A conversão visual vence ler indentação na cabeça
A maioria das ferramentas Pug para HTML dá uma caixa de texto e uma ligação de descarga. Para um fragmento de cinco linhas chega. Desmorona-se quando verifica markup de navegação, uma grelha de cartões ou um rodapé com texto e ligações misturados. Aqui origem e resultado ficam visíveis ao mesmo tempo. Altera uma indentação, o painel HTML reage, muda para Pré-visualização quando importam espaçamento e hierarquia — não só se existe um `</div>` em algum sítio. A barra de estado por baixo do editor diz se o modelo analisa. Quando não analisa, vê a mensagem do compilador na linha que falhou — em vez de um painel vazio e silencioso. HTML em tempo real mais renderização em sandbox: essa é a diferença prática. Não exporta markup às cegas para abrir noutra app e ver se a página está bem.
Vale a pena dizer duas limitações logo no início para não perder tempo. Esta ferramenta compila o Pug que cola ou importa no navegador. Não lê uma pasta de projeto — `include`, `extends` e partials externos ficam fora do âmbito. Mixins, condicionais, ciclos e blocos `style.` / `script.` no mesmo ficheiro comportam-se como numa compilação local normal. Se escrever JavaScript multilinha no topo do modelo — por exemplo um array de itens de menu — use uma linha `-` sozinha e o bloco JavaScript indentado por baixo. O Pug trata só a primeira linha após `-` como código; continuar um array no nível de indentação seguinte sem este padrão é uma armadilha de sintaxe frequente, e a mensagem de erro pode parecer críptica até conhecer a regra.
Voltar ao conversorPré-visualização renderizada, não só origem
O separador Pré-visualização carrega o HTML compilado num iframe isolado. Títulos, listas e ligações aparecem como o navegador os desenha — útil quando a indentação sozinha não diz se uma secção ficou no sítio certo.
Lado a lado enquanto corrige a sintaxe
Pug à esquerda, HTML à direita. Pequenas alterações — renomear um atributo, falta um ponto numa classe — aparecem de imediato antes de copiar ou descarregar.
Sem instalação para uma entrega rápida
Só precisa de markup para um ticket ou um bloco de landing pontual? Salte `npm install pug` e um script local. Importe, converta, copie, siga em frente.
Converta Pug em HTML e verifique a página, não só as etiquetas
Edição lado a lado, pré-visualização renderizada do HTML compilado, markup cru para fluxos de cópia e exportação — sem enviar a origem para um servidor.
Conversão visual em que pode confiar antes de colar
O layout é propositadamente simples: entrada Pug de um lado, saída do outro. À medida que escreve, o painel HTML atualiza-se. Mude para Pré-visualização quando quiser ver o documento como página — barras de navegação, grelhas de cartões, colunas de rodapé — em vez de inferir estrutura a partir da sintaxe indentada. Esse passo visual apanha bugs que passam quando só percorre saída com parênteses angulares: um invólucro em falta, uma classe no elemento errado, texto que devia estar dentro de uma ligação mas fica como irmão. O HTML cru fica a um clique quando precisa de inspecionar atributos, copiar um fragmento para um bloco CMS ou comparar com um ficheiro existente. Não fica preso só à pré-visualização ou só à origem — o fluxo corresponde à forma como as pessoas realmente revêm modelos.
Como converter Pug em HTML nesta página
Adicione a origem Pug
Cole no painel esquerdo ou use Carregar para um ficheiro `.pug` ou `.jade`. A indentação define o aninhamento — não misture tabulações e espaços no mesmo ficheiro. Se declarar variáveis ou arrays em JavaScript não bufferizado (`-`), coloque código multilinha sob uma linha `-` sozinha com o script indentado por baixo.
Leia o HTML e abra a Pré-visualização
O painel direito mostra por defeito a pré-visualização renderizada da página compilada. Mude para HTML quando precisar das etiquetas literais. Se o painel de entrada mostrar erro, corrija essa linha primeiro — pré-visualização e exportação ficam bloqueadas até o modelo analisar.
Copie, descarregue ou continue no playground
Use Copiar quando o destino é outra ferramenta ou um bloco HTML de CMS. Descarregar grava um ficheiro `.html`. Pré-visualizar / editar HTML visualmente envia a saída atual para o playground da página inicial quando quer edição visual para além do que o Pug sozinho permite.
Pug para HTML: perguntas que surgem mesmo
Pronto para transformar Pug em HTML que realmente viu?
Edição lado a lado, pré-visualização renderizada, copiar e descarregar — grátis, sem conta.
Pug para HTML
- Conversão visual com Pug e HTML lado a lado
- Pré-visualização renderizada do HTML compilado antes de exportar
- Copiar, descarregar ou abrir no playground
- Execução local no navegador após carregar
Apenas modelos autónomos — sem `include` nem `extends` a partir do disco.
