HTML-Formatierer

Formatieren Sie kompaktes oder unordentliches HTML in lesbares, eingerücktes Markup.

Eingabe
Ausgabe
0 Zeichen 0 Zeilen

Machen Sie HTML einfacher zu prüfen und zu bearbeiten

HTML-Formatierer erweitert kompakte HTML in eine lesbare Struktur mit Zeilenumbrüchen und Einrückungen um verschachtelte Elemente. Es ist nützlich für die Inspektion von Snippets, Vorlagen, generierten Markups, E-Mails und kopierten Seitenfragmenten.

HTML-Parser stellen viele fehlerhafte Dokumente wieder her, sodass die verschönerte Ausgabe sauberer aussehen kann als die Quelle und dennoch die Parsing-Regeln des Browsers widerspiegelt. Bei der Formatierung sollten Tags und Attribute erhalten bleiben, Leerzeichen-empfindlicher Inline-Text sollte jedoch überprüft werden.

Anleitung

  1. Fügen Sie Ihren HTML-Code in den Eingabeeditor ein.
  2. Klicken Sie auf Verschönern HTML, um das Markup umzufließen und einzurücken.
  3. Überprüfen Sie die Ausgabe auf erwartete Verschachtelungen, Kommentare, Inline-Text und Attribute.
  4. Verwenden Sie Kopieren für die Zwischenablage, Herunterladen für eine Datei oder Leeren zum Zurücksetzen.

Was ist HTML-Formatierer?

HTML-Formatierer ist ein browserbasiertes Dienstprogramm, mit dem Sie dichtes Markup in ein Dokument umwandeln können, das Sie scannen und bearbeiten können. Es hilft dabei, Eltern-Kind-Beziehungen, falsch platzierte Schluss-Tags und große Blöcke generierter HTML aufzudecken.

HTML-Leerzeichen können sich auf das Inline-Layout, Textknoten und vorformatierte Inhalte auswirken. Überprüfen Sie nach der Verschönerung von Vorlagen oder Produktionsmarkierungen, ob die gerenderte Ausgabe immer noch Ihrer Absicht entspricht.

Eingabehinweise

Fügen Sie HTML-Fragmente oder vollständige Dokumente ein. Seien Sie vorsichtig mit <pre>, Inline-Elementen, Vorlagensyntax und Kommentaren, auf die Ihr Build-System möglicherweise angewiesen ist.

Beispiel

Ein dichtes Dokument lässt sich einfacher verfolgen, wenn jedes verschachtelte Element in einer eigenen Zeile platziert wird:

--- Minifizierte Eingabe ---
<html><head><title>Test</title></head><body><p>Hello</p></body></html>

--- Verschönerte Ausgabe ---
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

MCP-Integration

MCP (Model Context Protocol) ermöglicht KI-Agenten und Apps, Coding.Tools-Werkzeuge zu entdecken und für wiederholbare Konvertierungs-, Formatierungs-, Hashing- und Generierungsabläufe auszuführen.

MCP-Toolname: html-beautifier

MCP-Endpunkt: https://coding.tools/mcp

Rufen Sie zuerst tools/list auf. Jeder Tool-Eintrag enthält inputSchema, outputSchema und examples, damit ein KI-Agent oder Client gültige Argumente ohne Raten erstellen kann.

Bei tools/call lesen Sie result.content[0].text für den Anzeigewert und result.structuredContent für maschinelles Parsen. Tool-Fehler liefern isError: true; Protokollfehler liefern einen JSON-RPC error.

Beispiel für eine tools/call-Anfrage:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"html-beautifier","arguments":{"input":"<section><h1>Docs</h1><p>MCP ready</p></section>"}}}'

Die meisten Text- und Datentools akzeptieren eine input-Zeichenkette sowie optionale options. Bildtools, die Browser-Bild-APIs benötigen, werden zur Erkennung aufgelistet und geben bei Bedarf einen Link zur Weboberfläche zurück.