HTML in Pug-Vorlagen umwandeln — Numio
Wandle HTML in Pug-Template-Syntax (früher Jade) um, die Einrückung statt schließender Tags verwendet. Wechsle zwischen vollständigem Dokument und HTML-Fragment und wähle Tabs, Kommas und Anführungszeichen-Stil. Das HTML wird zur Umwandlung an den Server gesendet.
Ein Pug-Template aus bestehendem HTML-Markup beginnen.
Wann sie hilft
- Ein Pug-Template aus bestehendem HTML-Markup beginnen.
- An einem kurzen Snippet prüfen, wie Attribute und Verschachtelung in Pug abgebildet werden, bevor du eine ganze Seite umwandelst.
Anwendung
- Füge HTML ein oder lade ein Beispiel (HTML-Fragment, Formularattribute, HTML-Dokument). Das Laden eines Beispiels ersetzt deine Eingabe.
- Aktiviere den Fragment-Modus, um nur das Snippet ohne html-, head- und body-Hülle umzuwandeln. Das Beispiel unten nutzt den Fragment-Modus mit aktivierten Tabs und Kommas und deaktivierten doppelten Anführungszeichen.
- Kopiere das Pug und kompiliere es mit deinem Pug-Setup, um das gerenderte HTML zu prüfen.
HTML-Eingabe
<section class="card"><h2>News</h2><p>Registration is open</p></section>
Pug-Ausgabe (Fragment-Modus, Tabs und Kommas an)
section.card h2 News p Registration is open
Details und Einschränkungen
Ist der Fragment-Modus aus, wird das HTML als Dokument behandelt, und html, head und body können ergänzt werden. Aktiviere ihn, wenn du nur die Elemente brauchst.
Das Mischen von Tabs und Leerzeichen kann in Pug Eltern-Kind-Beziehungen verändern. Halte dich an den Einrückungsstil deines Projekts.
Wiederholtes HTML wird nicht in Pug-each-Schleifen, Mixins oder Variablen umgewandelt, und externes CSS, Bilder und Skripte werden nicht übernommen.
Der HTML-Parser kann unvollständige Tags reparieren. Eine erfolgreiche Umwandlung validiert das HTML nicht und garantiert keine identische Seite.
FAQ
Warum werden html- und body-Tags ergänzt?
Im Dokument-Modus vervollständigt der Parser die äußeren Elemente. Aktiviere den Fragment-Modus, um das HTML einer Komponente ohne Hülle umzuwandeln.
Kann ich HTML in VS Code oder über die Kommandozeile in Pug umwandeln?
Diese Seite nutzt das Open-Source-Paket html2pug. Installiere es über npm, um Dateien in einem Skript oder über die Kommandozeile umzuwandeln, oder nutze diese Seite weiter für kurze Snippets.
Wie wandle ich Pug wieder in HTML um?
Diese Seite wandelt nur HTML in Pug um. Kompiliere das Template mit Pug selbst – zum Beispiel mit dem Paket pug-cli –, um wieder HTML zu erhalten.
Wird mein HTML hochgeladen?
Ja, es wird zur Umwandlung an den Server von douni.one gesendet. Verwende Code, den du weitergeben darfst, und entferne vorher API-Schlüssel oder Kundendaten.