HTML-indata

Pug-utdata

Vad ar en HTML till Pug-konverterare?

En HTML till Pug-konverterare omvandlar standard HTML-markering till Pug-templatesyntax. Pug ersatter omstandlig HTML med en ren, indragningsbaserad syntax.

Till exempel: <div class="hero"><p>Hej</p></div> blir div.hero p Hej. Pug anvands ofta med Express.js.

Hur man konverterar HTML till Pug

Folj dessa tre steg for att transformera HTML till Pug-syntax.

Klistra in eller ladda upp HTML

Klistra in din HTML i det vanstra panelen eller klicka pa Ladda upp.

Visa Pug-utdata

Det hogra panelen visar Pug-templaten med .klass, #id och korrekt indragning.

Kopiera eller ladda ner

Klicka pa Kopiera eller Ladda ner for att spara som .pug.

Nar man anvander denna konverterare

Migrera Express.js-projekt

Konvertera befintliga HTML-mallar for anvandning med Pug som view-motor i Express.

Stada upp omstandlig HTML

Pug-syntaxen tar bort alla sluttagar och minskar filen med 30-50%.

Lara sig Pug-syntax

Konvertera HTML du kanner till och se direkt Pug-motsvarigheten.

Generera prototyptemplates

Konvertera HTML-utdata fran designverktyg till Pug-templates for Node.js.

Vanliga fragor

Vad ar Pug-syntax?

Pug anvander indragning istallet for sluttagar. Klasser: div.minKlass. ID:n: div#mittId. Attribut inom parentes: a(href="/").

Hanterar det kapslade element?

Ja. Konverteraren gar igenom DOM och placerar varje element pa ratt indragningsniva.

Hur behandlas attribut?

Alla attribut utom klass och id placeras inom parentes: input(type="text").

Bevaras textinnehall?

Ja. Textnoder matas ut som inline-innehall nar det inte finns barn-element.

Lagras min HTML?

Nej. Allt sker i din webblesare.

Relaterade verktyg

Fler verktyg for att arbeta med HTML: