HTML-Formatierer
Rücken Sie HTML ein, einschließlich des JavaScript und CSS in <script> und <style>, während <pre> und <textarea> unangetastet bleiben.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.Serverseitig gerenderte Seiten, E-Mail-Templates und von einem Scraper abgegriffenes HTML kommen meist als eine einzige lange Zeile an. Dieses Werkzeug rückt das Markup mit dem HTML-Beautifier von js-beautify neu ein und übergibt jeden Inline-Block <script> und <style> an dessen JavaScript- und CSS-Formatierer, sodass auch der eingebettete Code lesbar wird. Leerraumsensitive Elemente werden respektiert: Der Inhalt von <pre> und <textarea> bleibt genau so, wie er war, und Inline-Elemente wie <b> und <a> bleiben in ihrer Textzeile.
So arbeitet es
- Lange Zeilen werden an der gewählten Spalte umbrochen; setzen Sie den Wert auf 0, um nie umzubrechen.
- Attribute bleiben standardmäßig in der Zeile des Tags oder stehen je eines pro Zeile – ausgerichtet oder mit der schließenden Klammer in einer eigenen Zeile.
- <head> und <body> stehen standardmäßig bündig mit <html>, wie es üblich ist; schalten Sie die Einrückungsoption ein, um sie eine Ebene tiefer zu setzen.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Verändert das Formatieren die Darstellung meiner Seite?
- In fast allen Fällen nicht. Leerraum zwischen Blockelementen beeinflusst das Layout nicht, und Inline-Elemente bleiben in ihrer Zeile, sodass keine Lücke zwischen Wörtern entsteht. Inhalte in <pre> und <textarea>, wo Leerraum sichtbar ist, werden nie angefasst.
- Funktioniert es mit JSX-, Vue- oder Handlebars-Templates?
- js-beautify erkennt Handlebars-Tags {{ }} und Django-artige Tags {% %} gut genug, um sie intakt zu lassen. JSX und Vue-Single-File-Components brauchen einen Formatierer, der sie tatsächlich parst, etwa Prettier, sonst bekommen die eingebetteten Ausdrücke womöglich falsche Abstände.
- Warum ist die Verschachtelung in der Ausgabe immer noch kaputt?
- Der Beautifier rückt ein, was er bekommt, und repariert es nicht. Ein nicht geschlossenes <div> wird eingerückt, als wäre es noch offen, sodass die Einrückung der Ausgabe Ihnen genau zeigt, wo der Fehler liegt. Nutzen Sie den W3C-Validator, wenn Sie ein formelles Urteil brauchen.
Das Open Source dahinter
Dieses Werkzeug läuft auf beautifier/js-beautify, veröffentlicht unter MIT. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
beautifier/js-beautifyAuch bekannt als
- HTML formatieren
- HTML Beautifier
- HTML formatieren online
- HTML Pretty Print
- HTML einrücken
- HTML Formatter online