Opis
To narzędzie porządkuje tagi, zagnieżdżenia i odstępy tak, aby markup był łatwiejszy do sprawdzenia i edycji. Zachowuje kolejność elementów oraz treść, ale sprawia, że hierarchia staje się od razu widoczna. Przydaje się, gdy HTML pochodzi z CMS-a, z wyniku buildu albo z kilku różnych źródeł. Ponieważ działa w przeglądarce, dobrze sprawdza się przy ręcznej analizie fragmentów, porównywaniu wersji szablonów i poprawkach kodu.
Zastosowania
- Analiza kodu z CMSUporządkuj HTML wygenerowany przez edytor treści, zanim zaczniesz szukać brakujących kontenerów lub błędnych zagnieżdżeń.
- Porównywanie dwóch wersji szablonuSformatuj obie wersje przed diffem, aby łatwiej zauważyć zmiany w strukturze.
- Porządkowanie kodu e-mailiPrzejrzyj długie fragmenty z tabelami i wbudowanymi elementami w bardziej czytelnej postaci.
- Przygotowanie fragmentów do dokumentacjiPokaż zespołowi kod w uporządkowanej formie, aby szybciej zrozumieć układ komponentu.
Jak to dziala
- 1
Wklej HTML do pola wejściowego.
- 2
Jeśli są dostępne, ustaw wcięcia lub obsługę komentarzy.
- 3
Uruchom formatowanie, aby uzyskać uporządkowany HTML.
- 4
Skopiuj wynik do edytora, notatek albo plików projektu.
Przyklady
Zwarty kafelek produktu
Wejscie: <article><h3>Pro Plan</h3><p>Everything included</p><a href="/pricing">View plans</a></article>
Wynik: <article> <h3>Pro Plan</h3> <p>Everything included</p> <a href="/pricing">View plans</a> </article>
Rozbija jednolinijkowy komponent na czytelne bloki.
Fragment układu zagnieżdżonego
Wejscie: <div class="wrap"><header><nav><a href="/">Home</a><a href="/docs">Docs</a></nav></header><main><section><img src="hero.jpg" alt="Hero"></section></main></div>
Wynik: <div class="wrap"> <header> <nav> <a href="/">Home</a> <a href="/docs">Docs</a> </nav> </header> <main> <section> <img src="hero.jpg" alt="Hero"> </section> </main> </div>
Rozdziela gęsty układ na wyraźne sekcje semantyczne.
Fragment tabeli e-maila
Wejscie: <table><tr><td><strong>Order #4821</strong></td><td align="right">Shipped</td></tr><tr><td colspan="2"><a href="https://example.com">Track package</a></td></tr></table>
Wynik: <table> <tr> <td><strong>Order #4821</strong></td> <td align="right">Shipped</td> </tr> <tr> <td colspan="2"> <a href="https://example.com">Track package</a> </td> </tr> </table>
Pokazuje, jak złożony HTML tabelowy staje się łatwiejszy do przejrzenia i edycji.
FAQ
Czy formatowanie zmieni kolejność atrybutów lub treść?
Nie powinno zmieniać znaczenia HTML. Celem jest poprawa wcięć i układu, a nie przepisywanie treści.
Dlaczego część prostych elementów zostaje w jednej linii?
Krótki kod inline może pozostać zwarty, jeśli formatter tak go zachowa. To zwykle normalne i ogranicza zbędny szum w kodzie.
Co się dzieje z błędnym HTML-em?
Mocno uszkodzony markup może się sformatować, ale wynik będzie opierał się na tym, jak parser odczytał strukturę. Warto najpierw poprawić błędy tagów.
Czy można usunąć komentarze podczas formatowania?
Jeśli opcja usuwania komentarzy jest włączona, komentarze mogą zostać skasowane. W przeciwnym razie pozostaną w kodzie.
Dlaczego wynik różni się od opcji prettify w moim edytorze?
Różne formatery mają inne zasady dotyczące łamania linii, białych znaków i elementów pustych. Niewielkie różnice są naturalne.