Beautifier HTML - sformatuj HTML w przeglądarce
HTML w stanie naturalnym to często jedna linia długości boiska - minifikator wyrzucił całe `index.html` bez whitespace, albo SSR React zwrócił skompresowany markup. Beautifier używa Prettiera z parserem html (oficjalny). To samo, co `prettier --write index.html`.
W trybie Grzecznym dostaniesz strukturę zachowaną zgodnie z HTML semantics - block elements (`<div>`, `<section>`, `<header>`) idą na własne linie z wcięciem, inline (`<span>`, `<a>`, `<em>`) zostają w linii żeby nie wprowadzać niechcianych spacji w renderingu.
W trybie Agresywnym (js-beautify) HTML jest łamany gdziekolwiek się da - każdy atrybut na swojej linii, każde dziecko bloku w osobnej linii. Może wprowadzić whitespace w rendering, więc używaj świadomie. Akceptuje `.html`, `.htm`.
Jak to działa
- Wybierz tryb (Grzeczny / Agresywny / Tylko wcięcia) lub zostaw domyślny.
- Wklej kod w lewy panel albo użyj "Wczytaj plik".
- Dostosuj ustawienia (koło zębate): wcięcie, szerokość, cudzysłowy, średniki.
- Kliknij Sformatuj - pierwszy raz potrwa chwilę (libki ładują się leniwie).
- Po prawej dostajesz wynik z syntax highlightingiem - kopiuj, pobierz albo otwórz w nowej karcie.
Kiedy się przydaje
Pięć sytuacji dla HTML:
- SSR output. React/Next renderuje `<html>` jako jedną linię. Wklej, czytasz strukturę.
- CMS / wp-admin export. WordPress wyrzuca posty z brzydkim HTML-em od TinyMCE.
- Email template. Outlook-friendly HTML to często jeden plik bez whitespace. Beautifuj przed wysyłką.
- Minifikat zapisany przez `html-minifier`. Odwracasz minifikację dla debugowania.
- Generated HTML z Markdown-a. `marked` / `unified` zwracają HTML bez wcięć.