HTML zu Pug
HTML in Pug (ehemals Jade) umwandeln: kurze Tag-Syntax mit .klassen und #ids, Attribute, Texte und Skripte korrekt eingerückt.
HTML zu Pug wandelt HTML in die kompakte Pug-Syntax (früher Jade) um. Klassen und IDs werden zu .klasse und #id, reine div-Elemente entfallen, Attribute landen in Klammern, Texte bleiben in der Zeile und Skripte werden als Block übernommen. Einrückung und Schreibweise der Attribute sind einstellbar; die Umwandlung läuft im Browser.
Pug
HTML und Pug im Vergleich
| HTML | Pug |
|---|---|
<div class="card"> | .card |
<nav id="menu"> | nav#menu |
<a href="/">Start</a> | a(href='/') Start |
<!-- Hinweis --> | //- Hinweis |
Kompilieren kannst du Pug mit Pug zu HTML.
Häufige Fragen
Was ist Pug?
Pug ist eine Template-Sprache für Node.js, die HTML ohne spitze Klammern und schließende Tags beschreibt. Die Struktur ergibt sich aus der Einrückung. Pug wird häufig mit Express oder in Static-Site-Generatoren eingesetzt.
Bleibt die Bedeutung des HTML erhalten?
Ja. Der Browser liest dein HTML zunächst ein, dann wird der Elementbaum in Pug ausgegeben. Dabei korrigiert der Browser offensichtliche Fehler, zum Beispiel nicht geschlossene Absätze. Kompiliere das Ergebnis mit „Pug zu HTML“ zur Kontrolle.
Werden Kommentare übernommen?
Ja, als nicht ausgegebene Pug-Kommentare (//-). Sie erscheinen später nicht im HTML. Wer sie sichtbar behalten will, ändert sie in // um.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.