Untangle messy HTML into clean, indented markup

Wklej dowolny kod HTML – nawet zminifikowany do jednego wiersza z procesu budowania – a narzędzie sformatuje go ponownie z właściwymi wcięciami, jednym tagiem na wiersz i spójnymi odstępami. Wybierz wcięcie 2, 4 lub 8 spacji. Wynik jest gotowy do wstawienia do edytora lub wklejenia w komentarzu do przeglądu kodu.

Upiększanie rozwija HTML dla czytelności: każdy znacznik w osobnym wierszu, zagnieżdżone elementy z wcięciem, puste wiersze zachowane między sekcjami. Minifikacja usuwa komentarze, redukuje ciągi białych znaków i usuwa podziały wierszy, dzięki czemu plik zajmuje mniej bajtów. Używaj upiększania do edycji i przeglądu, a minifikacji do wdrożenia produkcyjnego.

Nie — js-beautify (silnik działający pod maską) wykrywa bloki script i style oraz formatuje ich zawartość zgodnie z odpowiednimi regułami JS lub CSS, dzięki czemu skrypty osadzone pozostają poprawne, a arkusze stylów czytelne. Tagi samozamykające się, elementy puste oraz atrybuty z przestrzeni nazw (svg:xmlns, xlink:href) są obsługiwane prawidłowo.

Narzędzie dobrze radzi sobie ze zwykłym HTML i szablonami przypominającymi HTML, ale czysty JSX (wyrażenia w nawiasach klamrowych, fragmenty, znaczniki komponentów pisane wielką literą) jest interpretowany jako HTML i może powodować drobne usterki kosmetyczne. W przypadku kodu specyficznego dla danego frameworka zalecamy Prettier skonfigurowany pod Twój dialekt; dla surowego HTML, plików .htm i szablonów nasze narzędzie sprawdza się idealnie.

Nie dochodzi do żadnego przesyłania. Formatowanie odbywa się w całości w Twojej przeglądarce za pomocą js-beautify, więc możesz bezpiecznie wklejać wewnętrzne szablony stron, szkice maili lub kod HTML zawierający prywatne dane, a nic nie opuszcza Twojego urządzenia.

Minifikacja usuwa komentarze HTML, zamienia każdy ciąg białych znaków między tagami na pojedynczą spację i usuwa podziały wierszy. Efektem jest kod HTML renderujący się identycznie co do bajta, ale zwykle o 10–30% mniejszy. W połączeniu z kompresją gzip na serwerze wyraźnie zmniejsza to początkową wagę stron z dużą ilością treści.

Tak — kliknij Pobierz, aby zapisać sformatowany wynik jako output.html lub zminifikowany wynik jako output.min.html. Plik jest zakodowany w UTF-8, więc równie dobrze obsługuje treści w języku angielskim, cyrylicy, pismach CJK oraz pisanych od prawej do lewej.

To niewielkie narzędzie działające wyłącznie w przeglądarce — bez kosztów hostingu — dlatego udostępniamy je za darmo jako część naszego zestawu narzędzi dla programistów. Bez reklam, bez śledzenia danych wyjściowych, bez limitów rozmiaru pliku poza tym, co Twoja przeglądarka pomieści w pamięci.

Tryb upiększania pozwala wybrać wcięcie 2, 4 lub 8 spacji. Wybierz szerokość używaną przez Twój edytor lub styl kodu, a następnie skopiuj wynik lub pobierz go jako output.html, aby formatowanie przeszło prosto do Twojego projektu.

Selektor wcięć (2, 4 lub 8 spacji) działa tylko w trybie Formatowania, ponieważ Minifikacja z założenia usuwa wszystkie białe znaki i podziały wierszy — nie ma już czego wcinać. Przełącz się z powrotem na Formatowanie, aby ponownie zobaczyć działanie szerokości wcięcia.

Podczas wklejania lub edycji narzędzie automatycznie przeprowadza kontrolę struktury i wypisuje wszelkie niezamknięte, niedopasowane lub osierocone znaczniki zamykające bezpośrednio pod panelem wyniku — bez potrzeby klikania osobnego przycisku. Zielony komunikat „Nie znaleziono problemów strukturalnych” potwierdza, że znaczniki są poprawnie sformatowane.

Użyj trybu Upiększanie z wcięciem 2 spacji — to najczęstsza konwencja, która utrzymuje różnice zwięzłymi — a następnie sprawdź panel problemów strukturalnych, aby potwierdzić, że nie pozostawiono niezamkniętego znacznika. Po sprawdzeniu przełącz się na tryb Minifikacja przed wdrożeniem na produkcję, aby ponownie usunąć zbędne białe znaki.

Tak — przeciągnij plik .html, .htm lub .xhtml na obszar przesyłania albo kliknij go, aby przeglądać, a jego zawartość zostanie wczytana bezpośrednio do pola wejściowego dokładnie tak, jakbyś ją wkleił. Od tego momentu Upiększ, Minifikuj, szerokość wcięcia i sprawdzanie struktury działają identycznie, niezależnie od tego, czy kod pochodzi z pliku, czy z wklejenia.

Tak — gdy pojawi się wynik, obok panelu wyniku i głównego obszaru akcji wyświetla się przycisk Kopiuj. Kliknięcie go natychmiast kopiuje do schowka bieżący wynik Upiększ lub Minifikuj (na chwilę pokazuje „Copied!” jako potwierdzenie), więc możesz wkleić go bezpośrednio do edytora lub komentarza w przeglądzie kodu bez zapisywania pośredniego pliku .html.