Input HTML

Output Pug

Cos'e un convertitore HTML in Pug?

Un convertitore HTML in Pug trasforma il markup HTML standard in sintassi template Pug. Pug sostituisce l'HTML verboso con una sintassi pulita basata su spazi bianchi.

Ad esempio, <div class="hero"><p>Ciao</p></div> diventa div.hero p Ciao. Pug e ampiamente usato con Express.js.

Come convertire HTML in Pug

Segui questi tre passaggi per trasformare HTML in sintassi Pug.

1

Incolla o carica HTML

Incolla il tuo HTML nel pannello sinistro o clicca su Carica.

2

Vedi l'output Pug

Il pannello destro mostra il template Pug con notazione .classe, #id e indentazione corretta.

3

Copia o scarica

Clicca su Copia o Scarica per salvare come .pug.

Quando usare questo convertitore

Migrare progetti Express.js

Converti template HTML esistenti per usare Pug come motore di view in Express.

Pulire HTML verboso

La sintassi Pug rimuove tutti i tag di chiusura, riducendo il file del 30-50%.

Imparare la sintassi Pug

Converti HTML che conosci e vedi subito l'equivalente Pug.

Generazione di template prototipo

Converti output HTML di strumenti di design in template Pug per Node.js.

Domande frequenti

Cos'e la sintassi Pug?

Pug usa l'indentazione invece dei tag di chiusura. Classi: div.miaClasse. ID: div#mioId. Attributi tra parentesi: a(href="/").

Gestisce gli elementi annidati?

Si. Il convertitore percorre il DOM e colloca ogni elemento al corretto livello di indentazione.

Come vengono gestiti gli attributi?

Tutti gli attributi tranne classe e id vanno tra parentesi: input(type="text").

Il contenuto testo viene preservato?

Si. I nodi di testo vengono emessi come contenuto inline quando non ci sono elementi figli.

I miei dati vengono memorizzati?

No. Tutto avviene nel tuo browser.

Strumenti correlati

Altri strumenti per lavorare con HTML: