Hogyan működik a HTML szépítés
A szépítő tag-ről tag-re olvassa a jelölőnyelvedet, nyomon követi az elemek egymásba ágyazását, és újrakibocsátja őket egységes behúzással.
- Tag-ek elemzése. A könyvtár tokenek sorozatává alakítja a bemenetet: nyitó tag-ek, záró tag-ek, szöveges tartalom, megjegyzések, script és style blokkok tartalma.
- Beágyazás követése. A szépítő nyilvántartja a behúzási szintet. Minden nyitó tag, ami nem önzáró, mélyíti a szintet; minden záró tag visszaállítja.
- Beállítások alkalmazása. A behúzási választásod beállítja egy szint szélességét. A tördelési érték a hosszú sorokat töri meg.
- Jelölőnyelv újrakibocsátása. Végül a formázó visszaírja a tag-eket a kiszámított behúzással. Ha bekapcsoltad az inline formázást, a style blokkok CSS formázón, a script blokkok JS formázón mennek keresztül.
Miért érdemes HTML-t szépíteni
- Tömörített oldalak olvasása. Az éles HTML sortörések nélkül érkezik. A szépítés visszaállítja a szerkezetet.
- Inkonzisztens sablonok rendbetétele. A több ember által szerkesztett jelölőnyelv eltérő behúzásokat halmoz fel.
- Nem lassítja az oldalad. A legtöbb online formázó a teljes könyvtárat betölti az oldal megnyitásakor. Ez csak akkor tölti be a js-beautify-t, amikor szükség van rá.
- Semmi sem hagyja el a böngésződet. Az egész az eszközödön fut. A jelölőnyelved soha nem kerül szerverre.
Gyakori alkalmazások
A HTML szépítés akkor jön elő, amikor valakinek olvasnia kell olyan jelölőnyelvet, amit nem olvasásra írtak.
- Élő oldal ellenőrzése: tömörített forrás beillesztése a hibakereséshez.
- CMS kimenet tisztítása: sablon újraformázása commit előtt.
- Hozzáférhetőségi és SEO felülvizsgálatok: dokumentum kibontása a fejléc hierarchia ellenőrzéséhez.
Egy kidolgozott példa
Vegyünk egy tömörített részletet: <div><p>hi</p><span>x</span></div>. Illeszd be fent 2 szóköz behúzással, majd kattints a Szépítésre.
FAQ
Ez a böngészőmben fut?
Igen. A js-beautify könyvtár az első Szépítés kattintáskor töltődik be, majd gyorsítótárba kerül.
A szépítés megváltoztatja az oldalam megjelenését?
Nem. A szépítő csak szóközöket és sortöréseket ad hozzá és távolít el a tag-ek között.
Mit csinál az inline CSS és JS kapcsoló?
Kikapcsolva a style és script blokkok tartalma érintetlen marad. Bekapcsolva a CSS és JS is formázásra kerül.
Mit csinál a "tördelés oszlopnál"?
Beállítja a sormaximális hosszt, aminél a hosszú tag-ek több sorba törnek.
A böngészőoldali HTML szépítés olvasható jelölőnyelvet ad anélkül, hogy build lépésre vagy feltöltésre lenne szükség.