Jak wciąć nieczytelny HTML?

Wklej swój HTML z wybraną opcją Upiększania, a następnie ustaw Wcięcie na 2 spacje, 4 spacje lub Tabulatory. Wynik aktualizuje się podczas pisania, a Ty możesz go skopiować lub pobrać plik .html. Załaduj przykład pokazuje próbkę.

Czy może zawijać długie linie lub formatować wbudowany CSS i JavaScript?

Tak. Opcja Zawijanie oferuje Bez zawijania, 80 kolumn lub 120 kolumn, a opcja Formatuj znaczniki style i script formatuje również CSS i JavaScript wewnątrz tych bloków. Zawartość w pre i textarea pozostaje nienaruszona.

Jak zminifikować HTML do produkcji?

Wybierz Minifikuj. Białe znaki między znacznikami są zwijane, a komentarze usuwane, chyba że zaznaczysz Zachowaj komentarze. Opcjonalne pola wyboru to Usuń opcjonalne cudzysłowy, Skróć atrybuty logiczne oraz minifikacja osadzonych stylów, skryptów i atrybutów style.

Czy minifikacja uszkodzi moje bloki pre lub skrypty?

Zawartość pre, script, style i textarea jest chroniona podczas zwijania białych znaków, a spacja jest zachowywana między sąsiednimi elementami inline, aby słowa się nie zlewały. Opcjonalna minifikacja osadzona ma zastosowanie tylko wtedy, gdy ją zaznaczysz.

Czy mój HTML jest wysyłany na serwer?

Nie. Tokenizer wbudowany w stronę przetwarza znaczniki w Twojej przeglądarce, więc prywatne szablony i HTML e-maili pozostają na Twoim urządzeniu. Nie jest ładowana żadna zewnętrzna biblioteka formatująca.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek.

🌐

Upiększacz i minifikator HTML za darmo

Formatuj lub minifikuj HTML z właściwym wcięciem zagnieżdżenia. Zachowuje treść wewnątrz bloków <pre>, <script>, <style>.

Działa w przeglądarceBez rejestracji, bez wyskakujących okienekLogowanie nie jest wymaganeZa darmo na zawsze

Działa offline po wczytaniu

Wcięcie:

Zawijanie:

Formatuj <style> i <script>

Upuść plik tutaj lub kliknij, aby przeglądać

HTML, HTM · przetwarzane na Twoim urządzeniu

lub naciśnij Ctrl+V, aby wkleić ze schowka

Przeglądaj pliki

Wejście HTML

Sformatowany HTML

Wynik pojawi się tutaj…

Typowe zastosowania

Debuguj HTML Wyrenderowany przez SerwerWyświetl surowe wyjście HTML z serwera (PHP, Rails, Django, Node) w czytelnym formacie z wcięciami.
Formatuj Szablony HTML EmailaHTML emaila jest rozwlekły (tabele, style inline). Formatuj aby uczynić go edytowalnym i możliwym do utrzymania.
Formatuj Statyczne Strony HTMLRęcznie edytowane statyczne pliki HTML korzystają na spójnym formatowaniu do edycji wspólnej.
Wyczyść HTML Eksportowany z CMSWordPress, Wix, Squarespace eksportują HTML z wieloma artefaktami. Formatuj aby uczynić go edytowalnym.
Minimalizuj HTML do ProdukcjiZmniejsz rozmiar pliku HTML dla szybszego ładowania stron poprzez usunięcie białych znaków i niepotrzebnych znaków.

Jak to działa

To narzędzie formatuje lub kompresuje HTML za pomocą ręcznie napisanego tokenizera świadomego znaczników, wbudowanego w stronę — bez zewnętrznej biblioteki formatującej i odwołań do serwera. Każdy znak kodu jest przetwarzany lokalnie w przeglądarce w chwili wpisania lub wklejenia.

1
Tokenizer skanuje kod
Własny skaner przechodzący znak po znaku przez ciąg HTML rozpoznaje komentarze, deklaracje DOCTYPE, znaczniki otwierające i zamykające, samozamykające się elementy puste (br, img, input itd.) oraz surowe węzły tekstowe. Osobna funkcja pomocnicza śledzi wartości atrybutów w cudzysłowach, więc znaki takie jak > wewnątrz atrybutu (np. value="a>b") nigdy nie powodują przedwczesnego podziału znacznika.
2
Głębokość wcięcia śledzona dla każdego znacznika
W trybie upiększania tokenizer utrzymuje licznik głębokości. Blokowe znaczniki otwierające zwiększają głębokość; znaczniki zamykające zmniejszają ją przed zapisaniem. Elementy liniowe (span, a, strong, em itd.) pozostają w tym samym wierszu co ich treść, zamiast trafiać do osobnego wciętego wiersza. Znaczniki takie jak pre, script, style i textarea mają wewnętrzną treść wypisywaną dosłownie, aby nie uszkodzić kodu wrażliwego na białe znaki lub wykonywalnego.
3
Minifikator bezpiecznie zwija białe znaki
W trybie minifikacji zawartość bloków pre, script, style i textarea jest zastępowana numerowanymi znacznikami zastępczymi przed zwijaniem białych znaków. Komentarze HTML są usuwane, a ciągi białych znaków między znacznikami są usuwane — z wyjątkiem sąsiednich elementów liniowych, gdzie zostaje pojedyncza spacja, aby słowa się nie zlewały. Następnie znaczniki zastępcze są przywracane do oryginalnej treści.
4
Wynik jest wyświetlany i opcjonalnie zapisywany
Sformatowany lub zminifikowany wynik pojawia się na żywo w panelu wyjściowym wraz z procentową zmianą rozmiaru. Możesz go skopiować do schowka lub pobrać jako plik .html, nie opuszczając przeglądarki.