Formatowanie HTML
Nadaj dokumentowi HTML wcięcia bez zmiany sposobu, w jaki jest renderowany, w całości w twojej przeglądarce.
Działa w całości w twojej przeglądarce. Nic nie jest wysyłane, logowane ani przechowywane.
Wklej zminifikowaną albo źle wciętą stronę i przeczytaj ją porządnie. Formatowanie odbywa się w twojej przeglądarce, a dokument na wyjściu renderuje się dokładnie tak samo jak ten na wejściu.
Jak to działa
Dokument jest wczytywany do drzewa — tam rozstrzyga się sprawa elementów pustych, zawartości script i style oraz opcjonalnych znaczników zamykających HTML — a potem zapisywany od nowa z nowymi wcięciami.
O tym, gdzie wypadają podziały wierszy, decyduje to, jak przeglądarka odczytuje białe znaki, a nie to, co ładnie wygląda. Każdy ciąg białych znaków jest renderowany jako jedna spacja, więc zamiana spacji na podział wiersza i wcięcie niczego nie zmienia. Utworzenie białego znaku tam, gdzie go nie było, już tak: to właśnie zamienia dwa przylegające elementy liniowe w dwa elementy oddzielone spacją.
Dlatego białe znaki są dodawane lub usuwane tylko między elementami blokowymi i na ich krawędziach, gdzie przeglądarka żadnych nie renderuje. To wyjątek, który pozwala rozłożyć zminifikowaną stronę, i to także powód, dla którego ciąg elementów liniowych zostaje w wierszu, w którym był.
Znacznik, o którym formatter nigdy nie słyszał, jest traktowany jako liniowy, bo to odpowiedź, która nie dodaje białych znaków, a więc nie może zmienić strony.
Przykłady
| Przypadek | Dane wejściowe | Wynik |
|---|---|---|
| Lista bez wcięć | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Najczęściej zadawane pytania
Czy moja strona jest gdzieś wysyłana?
Nie. Formatter to JavaScript działający na tej stronie. Nic nie jest przesyłane, rejestrowane ani przechowywane: możesz odłączyć sieć, a narzędzie dalej będzie działać.
Dlaczego moje elementy liniowe zostały w jednym wierszu?
Bo przesunięcie ich zmieniłoby twoją stronę. Biały znak między dwoma elementami liniowymi jest renderowany jako spacja, więc rozpisanie <span>a</span><span>b</span> na dwa wiersze wstawia między nie odstęp, którego nie było. Większość formatterów i tak to robi; ten nie.
Czy zamknie moje niezamknięte znaczniki?
Nie. Rozumie, że drugi element listy zamyka pierwszy, więc poprawnie wcina twoją listę, ale zapisuje z powrotem znaczniki, które napisałeś. Dodanie znacznika zamykającego byłoby edytowaniem twojego kodu, a nie jego układaniem, a to, gdzie dokładnie powinien się znaleźć, nie zawsze jest oczywiste.
Czy waliduje HTML?
Nie. Nie ma schematu, reguł dotyczących tego, który element może zawierać który, ani zdania na temat twoich atrybutów. Odrzuca tylko niezamknięty znacznik, komentarz lub blok skryptu, bo od tego miejsca nie potrafi już odróżnić kodu znaczników od tekstu.
Co z moimi skryptami i stylami?
Wracają bajt w bajt. Wewnątrz skryptu < to znak mniejszości, a nie początek znacznika, a wewnątrz <pre> lub <textarea> każda spacja należy do ciebie. Te cztery elementy są zostawiane dokładnie takie, jakie były. Jeśli chcesz sformatować sam skrypt lub arkusz stylów, formatowanie CSS jest tuż obok.
Warto wiedzieć
- Dokument na wyjściu renderuje się tak samo jak ten na wejściu. Potwierdzają to testy na korpusie, zamiast zostawiać to do sprawdzenia na oko.
- Nic nie jest wymyślane: nie dodaje się żadnego znacznika zamykającego, nie zmienia się cudzysłowów żadnego atrybutu, nie dekoduje się żadnej encji i nie zmienia się wielkości liter żadnej nazwy znacznika. Zmieniają się tylko odstępy między atrybutami, bo nigdy nie są renderowane.
- Szerokość zawijania decyduje, czy element z zawartością liniową zostaje w jednym wierszu, czy zostaje rozłożony, więc krótki akapit czyta się jako jeden wiersz, a długi jest dzielony w miejscach spacji, które już miał.
Źródła
Wszystkie narzędzia z kategorii Kod