HTML-Formatierer & Minifier

Was ist ein HTML-Formatierer?#

Ein HTML-Formatierer nimmt Markup, das seine Form verloren hat — Ausgabe einer Template-Engine, die jedes Tag auf eine Zeile kollabiert hat, ein Schnipsel, der mit dem Einrückungsstil jemand anderes eingefügt wurde, oder ein Teil einer E-Mail-Vorlage, der über Monate gewachsen ist — und rückt es so neu ein, dass die Schachtelung auf einen Blick erkennbar ist. Die umgekehrte Aufgabe, das Minifizieren, quetscht dasselbe Markup zusammen, indem alles entfernt wird, was ein Browser nicht benötigt: Kommentare und den Whitespace zwischen Tags.

Diese Seite beherrscht beides, und die beiden Richtungen sind unterschiedlich gebaut, weil HTML das verlangt. Formatieren verwendet html_beautify von js-beautify, das Elemente konsistent einrückt und die Zeilenumbrüche erhält, die Sie tatsächlich behalten wollen. Minifizieren ist ein konservativer, handgeschriebener Scanner. Die wichtigste Regel, die er befolgt: Der Inhalt von <pre>, <code>, <textarea>, <script> und <style>-Elementen bleibt vollständig unangetastet — Whitespace innerhalb eines <pre>-Blocks oder eines <script> zu kollabieren, würde die Seite korrumpieren, weil in diesen Elementen Whitespace Teil der Daten ist, nicht Dekoration. Genau ein naiver Minifier, der das nicht weiß, ist der Grund, warum ein Code-Beispiel auf einer Live-Seite plötzlich seine Einrückung verliert.

Verwendung#

1. Fügen Sie Ihr Markup in die HTML-Fläche links ein oder klicken Sie auf Beispiel für ein kurzes Beispieldokument.
2. Wählen Sie auf der Werkzeugleiste eine Einrückung: 2, 4 (der Standard für HTML) oder Tabulator. Vier Leerzeichen sind ein verbreiteter Hausstil für Markup, weil verschachtelte Tags schnell zunehmen.
3. Klicken Sie auf eine Aktion:
   • Formatieren — über js-beautify neu einrücken, wobei vorhandene Zeilenumbrüche erhalten bleiben, damit manuell umbrochene Zeilen nicht zusammengestaucht werden.
   • Minifizieren — HTML-Kommentare entfernen, den Whitespace zwischen Tags auf nichts kollabieren und Whitespace in normalen Text-Knoten stutzen — während das Innere von <pre>, <code>, <textarea>, <script> und <style> exakt so belassen wird, wie es geschrieben wurde.
4. Lesen Sie das Ergebnis in der Ausgabe-Fläche. Verwenden Sie Kopieren in der Ausgabe-Kopfzeile, um es zu übernehmen; Leeren setzt beide Flächen zurück.

Eckpunkte#

• Behält, was zählt. Der Inhalt von <pre>, <code>, <textarea>, <script> und <style> wird beim Minifizieren wörtlich kopiert. Der Whitespace innerhalb dieser Elemente ist bedeutungstragend; ihn zu entfernen würde verändern, was der Browser rendert.
• Kommentare beim Minifizieren entfernt, beim Formatieren behalten. <!-- ... -->-Blöcke werden nur entfernt, wenn Sie ausdrücklich minifizieren. Formatieren belässt sie an Ort und Stelle.
• HTML-freundliche Standard-Einrückung. Vier Leerzeichen, weil tief verschachteltes Markup mit einem breiteren Schritt besser lesbar ist. Wechseln Sie zu 2 oder Tabulator, wenn das zu Ihrem Projekt passt.
• Zweispaltig, kopierbereit. Eingabe editierbar, Ausgabe schreibgeschützt, Kopieren mit einem Klick.
• Läuft ausschließlich in Ihrem Browser. js-beautify ist mit der Seite gebündelt und wird bei Bedarf geladen; kein Backend, kein Upload, Ihr Markup bleibt auf Ihrem Gerät.

Konkretes Beispiel#

Ein Fragment einer Produktkarte, aus einer Vorlage herausgezogen, mit einem Kommentar und einem <pre>-Block darin:

Eingabe:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Klicken Sie auf Formatieren mit 4 Leerzeichen:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Klicken Sie nun auf Minifizieren auf dieselbe Eingabe:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

Drei Dinge fallen auf. Der Kommentar ist weg. Der Whitespace zwischen den Tags ist weg — das </span> und das <pre> liegen jetzt direkt aneinander, was sicher ist, weil Whitespace zwischen Tags in HTML reine Dekoration ist. Aber der Zeilenumbruch innerhalb des <pre> (npm install über npm run build) ist noch da, genau wie geschrieben. Das ist die Regel bei der Arbeit: Dekoration kollabieren, Daten bewahren.

FAQ#

Warum bleiben nach dem Minifizieren einzelne Leerzeichen zwischen Tags erhalten?#

Whitespace-only Text-Knoten, die zwischen Block-Level-Tags liegen, werden vollständig entfernt. Ein einzelnes Leerzeichen innerhalb einer Textzeile — Hello <em>world</em> — ist jedoch bedeutungstragend, weil seine Entfernung die Wörter zusammenziehen würde. Der Scanner behält bedeutungsvolle Leerzeichen in Text-Knoten und entfernt nur rein dekorativen Whitespace zwischen Tags.

Entfernt Minifizieren Attribute, Anführungszeichen oder Standardwerte?#

Nein. Es schreibt keine Attribut-Syntax um, entfernt keine Anführungszeichen, kollabiert keine booleschen Attribute und streift kein type="text". Diese Transformationen verlangen einen vollständigen HTML-Parser mit Schema-Wissen und sind fehleranfällig; dieses Werkzeug bleibt auf der sicheren Seite und entfernt nur Kommentare und dekorativen Whitespace.

Wird das JavaScript innerhalb meiner <script>-Tags minifiziert?#

Nein. Der gesamte Inhalt von <script> wird unangetastet durchgereicht — einerseits, weil eine Änderung ASI brechen könnte, andererseits, weil ein separater JS-Minifier auf der Seite format/js lebt. Wenn Sie das Skript minifiziert haben wollen, nehmen Sie es heraus, lassen es durch jenes Werkzeug laufen und fügen es wieder ein.

Versteht es Template-Syntax wie {{ var }} oder {% if %}?#

Formatieren rückt um Template-Token herum neu ein und liefert meist lesbare Ausgabe. Minifizieren behandelt Template-Tags wie normalen Text und kollabiert keinen Whitespace innerhalb von Tags auf eine Weise, die deren Bedeutung verändert. Bei intensivem Templating betrachten Sie die Ausgabe als starken Ausgangspunkt und verifizieren sie gegen Ihren Renderer.