HTML-Eingabe

Pug-Ausgabe

Was ist ein HTML-zu-Pug-Konverter?

Ein HTML-zu-Pug-Konverter wandelt Standard-HTML-Markup in Pug-Template-Syntax um. Pug ersetzt ausfuhrliches HTML durch eine saubere, leerraumbasierte Syntax.

Zum Beispiel wird <div class="hero"><p>Hallo</p></div> zu div.hero p Hallo. Pug wird haufig mit Express.js verwendet.

Wie man HTML in Pug konvertiert

Folgen Sie diesen drei Schritten, um HTML in Pug-Syntax zu transformieren.

HTML einfugen oder hochladen

Fugen Sie Ihr HTML in das linke Panel ein oder klicken Sie auf Hochladen.

Pug-Ausgabe anzeigen

Das rechte Panel zeigt das Pug-Template mit .Klasse, #id und korrekter Einruckung.

Kopieren oder herunterladen

Klicken Sie auf Kopieren oder Herunterladen, um als .pug zu speichern.

Wann diesen Konverter verwenden

Express.js-Projekte migrieren

Konvertieren Sie vorhandene HTML-Vorlagen fur Pug als View-Engine in Express.

Ausfuhrliches HTML bereinigen

Die Pug-Syntax entfernt alle schliessenden Tags und reduziert die Datei um 30-50%.

Pug-Syntax lernen

Konvertieren Sie HTML, das Sie kennen, und sehen Sie sofort das Pug-Aquivalent.

Prototyp-Template-Generierung

Konvertieren Sie HTML-Ausgaben von Design-Tools in Pug-Templates fur Node.js.

Haufige Fragen

Was ist Pug-Syntax?

Pug verwendet Einruckung statt schliessender Tags. Klassen: div.meineKlasse. IDs: div#meineId. Attribute in Klammern: a(href="/").

Werden verschachtelte Elemente behandelt?

Ja. Der Konverter geht den DOM durch und gibt jedes Element auf dem richtigen Einruckungsniveau aus.

Wie werden Attribute behandelt?

Alle Attribute ausser Klasse und ID kommen in Klammern: input(type="text").

Wird Textinhalt erhalten?

Ja. Textknoten werden als Inline-Inhalt ausgegeben, wenn keine Kindelemente vorhanden sind.

Werden meine Daten gespeichert?

Nein. Alles geschieht in Ihrem Browser.

HTML zu Pug Konverter