Pug zu HTML
Pug-Templates im Browser zu HTML kompilieren: Variablen, Schleifen, Bedingungen und Mixins mit lesbarer oder kompakter Ausgabe.
Pug zu HTML kompiliert Pug-Templates (früher Jade) direkt im Browser zu HTML. Variablen, Schleifen, Bedingungen, Mixins und Interpolationen werden ausgewertet. Fehler erscheinen mit Zeilenangabe, die Ausgabe ist eingerückt oder kompakt. So testest du Pug-Schnipsel, ohne ein Projekt aufzusetzen.
HTML
Pug-Syntax im Überblick
| Pug | Bedeutung |
|---|---|
p.hinweis Text | Element mit Klasse und Text |
a(href='/') Start | Attribute in Klammern |
- const x = 1 | JavaScript-Zeile |
h2= titel | Ausdruck als Text (maskiert) |
each p in liste | Schleife |
mixin karte(titel) | Wiederverwendbarer Baustein |
HTML nach Pug übersetzt HTML zu Pug, das Ergebnis lesbar machst du mit HTML formatieren.
Häufige Fragen
Wird JavaScript im Template ausgeführt?
Ja, Code-Zeilen mit „-“ und Ausdrücke wie #{…} werden beim Kompilieren ausgeführt, so wie es Pug vorsieht. Das passiert nur in deinem Browser. Füge deshalb nur Templates ein, denen du vertraust.
Funktionieren include und extends?
Nein. Sie laden weitere Dateien, die es im Browser nicht gibt. Kopiere die benötigten Teile direkt in die Eingabe.
Warum ist „eingerückt“ nicht immer exakt?
Die Option pretty ist in Pug veraltet, weil eingefügte Leerzeichen bei Inline-Elementen die Darstellung verändern können. Für die Auslieferung nutzt du die kompakte Ausgabe, zum Lesen die eingerückte.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.