Jak funguje zkrášlování HTML
Zkrášlovač čte váš markup tag po tagu, sleduje, jak hluboko je každý element vnořen, a znovu jej vydá s konzistentním odsazením. Nikdy nemění to, co stránka vykresluje — pouze to, jak je zdroj rozvržen.
- Parsování tagů. Knihovna naskenuje váš vstup do proudu tokenů: otevírací tagy, zavírací tagy, textový obsah, komentáře a obsah script a style bloků. Uvozovkované hodnoty atributů a těla pre a textarea elementů jsou považovány za jednotlivé celky, takže bílé místo uvnitř nich je ponecháno nedotčeno.
- Sledování vnoření. Při procházení tokenového proudu si zkrášlovač udržuje úroveň odsazení. Každý otevírací tag, který není self-closing, posouvá úroveň o krok hlouběji; každý odpovídající zavírací tag ji vrací zpět. Tato hloubka určuje, kolik jednotek odsazení je před každým řádkem, který dostanete zpět.
- Aplikace vašich možností. Vaše volba odsazení — 2 mezery, 4 mezery nebo tabulátor — nastavuje šířku jedné úrovně. Hodnota zalamování na sloupci rozděluje dlouhé řádky atributů nebo textu, jakmile překročí vámi zvolený sloupec. Limit prázdných řádků sbaluje dlouhé běhy prázdných řádků na vámi nastavený limit.
- Nový výstup markupu. Nakonec formátovač vytiskne tagy zpět s odsazením a zalomením řádků, které vypočítal. Pokud jste zapnuli inline formátování, obsah každého style bloku projde CSS formátovačem a každý script blok JS formátovačem, takže vložený kód je zarovnán s okolním markupem.
Proč zkrášlovat HTML
- Čtení minifikovaných stránek. Produkční HTML se dodává s odstraněným zalomením řádků pro úsporu bajtů. Zkrášlení vrací strukturu zpět, takže najdete sekci, kterou hledáte, odhalíte chybějící zavírací tag a uvidíte, jak dokument skutečně vnořuje.
- Uspořádání nekonzistentních šablon. Markup, který upravovalo několik lidí, sklouzne do smíšeného odsazení a umístění tagů. Jeden průchod zkrášlovačem normalizuje celý soubor, takže další commit ukazuje změnu, kterou jste provedli, místo stěny přeformátovaného bílého místa.
- Nezpomaluje vaši stránku. Většina online formátovačů stáhne celou knihovnu v okamžiku otevření stránky. Tento načítá js-beautify pouze tehdy, když kliknete na Zkrášlit nebo zapnete Živý režim, takže první načtení stojí pár kilobajtů místo několika set a stránka zůstává rychlá.
- Nic neopouští váš prohlížeč. Celá věc běží na vašem zařízení. Váš markup není nikdy nahrán na server, což je důležité, když stránka patří klientovi, obsahuje interní URL nebo spadá pod dohodu o mlčenlivosti, kterou jste podepsali.
Běžné aplikace
Zkrášlování HTML přichází na řadu vždy, když někdo potřebuje číst markup, který nebyl napsán pro čtení.
- Prohlížení živé stránky: vložte minifikovaný zdroj z View Source, abyste našli markup za chybou rozvržení, kterou nemůžete reprodukovat lokálně.
- Čištění CMS výstupu: přeformátujte šablonu, kterou page builder exportoval na jednom řádku, než ji commitnete zpět do repozitáře.
- Audity přístupnosti a SEO: rozbalte dokument, abyste zkontrolovali pořadí nadpisů, strukturu landmarků a alt atributy proti skutečnému DOM.
Příklad
Vezměte minifikovaný úryvek: <div><p>hi</p><span>x</span></div>. Vložte jej výše s odsazením 2 mezery, pak klikněte na Zkrášlit. Získáte zpět čitelný blok: <div> na vlastním řádku, <p>hi</p> a <span>x</span> každé odsazené o jednu úroveň pod ním a odpovídající </div> zarovnané pod nimi. Přepněte odsazení na Tabulátory a každá úroveň se posune ze dvou mezer na tabulátor. Přidejte blok <style>a{color:red}</style>, zapněte "Také formátovat inline CSS & JS" a pravidlo se rozvine na vlastní odsazené řádky místo setrvání na jednom.
FAQ
Běží to v mém prohlížeči?
Ano. Knihovna js-beautify je načtena při prvním kliknutí na Zkrášlit nebo zapnutí Živého režimu, pak je uložena do mezipaměti. Váš markup nikdy neopustí stránku — neprobíhá žádná cesta na server ani nahrávání.
Změní zkrášlení způsob vykreslení mé stránky?
Ne. Zkrášlovač pouze přidává a odebírá bílé místo a zalomení řádků mezi tagy. Prohlížeč toto bílé místo ignoruje při sestavování stránky, takže vykreslený výsledek je identický. Jediná věc, na kterou si dát pozor, je bílé místo citlivé na kontext uvnitř pre, textarea nebo inline elementů, které formátovač záměrně ponechává nedotčené.
Co dělá přepínač inline CSS a JS?
Když je vypnutý, obsah style a script bloků je ponechán přesně tak, jak jste jej vložili. Zapněte jej a CSS uvnitř každého style bloku projde CSS formátovačem a JavaScript uvnitř každého script bloku JS formátovačem, takže vložený kód je odsazen tak, aby odpovídal okolnímu markupu.
Co dělá "zalamovat na sloupci"?
Nastavuje délku řádku, při které se tag s mnoha atributy nebo dlouhý běh textu rozdělí na více řádků. Ponechte na 0 pro zachování každého elementu na jednom řádku bez ohledu na délku. Nastavte na 80 nebo 120 a formátovač zalomí vše, co překročí tento sloupec, což udržuje široké elementy čitelné v úzkém editoru.
Zkrášlování HTML na straně prohlížeče vám poskytne čitelný markup bez build kroku nebo nahrávání. Vložte minifikovanou nebo neuspořádanou stránku, zvolte odsazení a šířku zalamování, rozhodněte se, zda přeformátovat inline CSS a JS, pak zkopírujte nebo stáhněte výsledek. Nic neopouští vaše zařízení, není vyžadován účet a knihovna se načítá pouze tehdy, když o to požádáte, takže otevření této stránky vás stojí pár kilobajtů místo megabajtu.