Údržba HTML šablony, kterou ti někdo poslal v jednom dlouhém řádku. Příprava produkčního HTML — minifikuj na deploy. Debug složitého layoutu — naformátuj a uvidíš strukturu. Code review po předělané build pipeline.

Pre/textarea jsou citlivé na whitespace. Přidání newlinů dovnitř změní vykreslení. Formátovač by je (ne)měl escapovat. Inline elementy. Přidání newlinu mezi inline elementy může přidat mezeru, která tam vizuálně nebyla. Comments s podmínkami pro IE. se nemají stripovat, pokud je potřebuješ. Žádné sémantické změny. Formátovač jen mění whitespace, nepřeskupuje atributy ani neupravuje sémantiku.

HTML formátovač

Naformátuj a zkrášli HTML nebo ho zminifikuj. Velikost indentu, strip komentářů a self-closing tagy.

Vstup

Mode

Indent

Strip comments

Collapse whitespace in text

Výstup

Zadej vstup nahoře, aby ses dostal k výsledku.

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

Naformátuje minifikovaný nebo neuspořádaný HTML kód s konzistentním indentem, nebo naopak minifikuje (vyhodí whitespace a komentáře). Tenhle nástroj rozumí self-closing tagům (<br>, <img>) a umí strip-nout komentáře.

Kdy to použít

Údržba HTML šablony, kterou ti někdo poslal v jednom dlouhém řádku.
Příprava produkčního HTML — minifikuj na deploy.
Debug složitého layoutu — naformátuj a uvidíš strukturu.
Code review po předělané build pipeline.

Časté chyby

Pre/textarea jsou citlivé na whitespace. Přidání newlinů dovnitř změní vykreslení. Formátovač by je (ne)měl escapovat.
Inline elementy. Přidání newlinu mezi inline elementy může přidat mezeru, která tam vizuálně nebyla.
Comments s podmínkami pro IE.  se nemají stripovat, pokud je potřebuješ.
Žádné sémantické změny. Formátovač jen mění whitespace, nepřeskupuje atributy ani neupravuje sémantiku.