Cum funcționează înfrumusețarea HTML
Beautifier-ul citește marcajul tău tag cu tag, urmărește cât de adânc este imbricat fiecare element și-l reemite cu indentare consistentă. Nu schimbă niciodată ceea ce se redează pe pagină — doar cum este aranjată sursa.
- Parsează tagurile. Biblioteca scanează intrarea ta într-un flux de token-uri: taguri de deschidere, taguri de închidere, conținut text, comentarii și conținutul blocurilor script și style. Valorile de atribute citate și corpurile elementelor pre și textarea sunt tratate ca unități unice, astfel încât spațiile albe din interiorul lor sunt lăsate neatinse.
- Urmărește imbricarea. Pe măsură ce parcurge fluxul de token-uri, beautifier-ul menține un nivel curent de indentare. Fiecare tag de deschidere care nu se auto-închide adâncește nivelul cu un pas; fiecare tag de închidere corespunzător îl readuce la nivelul anterior. Acea adâncime decide câte unități de indentare stau în fața fiecărei linii pe care o primești înapoi.
- Aplică opțiunile tale. Alegerea ta de indentare — 2 spații, 4 spații sau un tab — setează lățimea unui nivel. Valoarea de împachetare la coloana întrerupe liniile lungi de atribute sau text odată ce depășesc coloana pe care o alegi. Plafonul de linii libere colapsează succesiunile lungi de linii goale la limita pe care o setezi.
- Re-emite marcajul. În final, formatorul printează tagurile înapoi cu indentarea și întreruperile de linie pe care le-a stabilit. Dacă ai activat formatarea inline, conținutul fiecărui bloc style trece prin formatorul CSS, iar fiecare bloc script prin formatorul JS, astfel încât codul încorporat să se alinieze cu marcajul din jur.
De ce să înfrumusețezi HTML
- Citește pagini minificate. HTML-ul de producție este livrat cu întreruperile de linie eliminate pentru a economisi octeți. Înfrumusețarea pune structura înapoi, astfel încât să poți găsi secțiunea pe care o cauți, să observi un tag de închidere lipsă și să urmărești cum se imbrică documentul de fapt.
- Curăță șabloane inconsistente. Marcajul pe care l-au editat mai multe persoane devine neuniform ca indentare și plasare a tagurilor. Un singur pas prin beautifier normalizează întregul fișier, astfel încât următorul commit să arate schimbarea pe care ai făcut-o, nu un perete de spații albe reformatate.
- Nu îți încetinește pagina. Majoritatea formatoarelor online încarcă întreaga bibliotecă imediat ce se deschide pagina. Acesta preia js-beautify doar când faci click pe Înfrumusețează sau activezi modul live, astfel încât prima încărcare costă câțiva kiloocteți în loc de câteva sute, iar pagina rămâne rapidă.
- Nimic nu părăsește browserul tău. Totul rulează pe dispozitivul tău. Marcajul tău nu este niciodată încărcat pe un server, ceea ce contează atunci când pagina aparține unui client, conține URL-uri interne sau intră sub incidența unui acord de confidențialitate pe care l-ai semnat.
Aplicații comune
Înfrumusețarea HTML intervine ori de câte ori cineva trebuie să citească un marcaj care nu a fost scris pentru a fi citit.
- Inspectarea unei pagini live: lipește sursa minificată din View Source pentru a găsi marcajul din spatele unei erori de layout pe care nu o poți reproduce local.
- Curățarea ieșirii CMS: reformatează un șablon pe care un constructor de pagini l-a exportat pe o singură linie înainte de a-l comite înapoi în depozit.
- Revizuiri de accesibilitate și SEO: expandează documentul pentru a putea verifica ordinea anteturilor, structura reperelor și atributele alt față de DOM-ul real.
Un exemplu practic
Preia un fragment minificat: <div><p>hi</p><span>x</span></div>. Lipește-l mai sus cu indentare setată la 2 spații, apoi click pe Înfrumusețează. Primești înapoi un bloc lizibil: <div> pe propria linie, <p>hi</p> și <span>x</span> fiecare indentate cu un nivel dedesubt și </div> de închidere aliniat dedesubt. Schimbă indentarea pe Tabulatoare și fiecare nivel se deplasează de la două spații la un tab. Adaugă un bloc <style>a{color:red}</style>, activează „Formatează și CSS & JS inline” și regula se expandează pe propriile linii indentate în loc să rămână pe una singură.
FAQ
Rulează acesta în browserul meu?
Da. Biblioteca js-beautify este preluată prima dată când faci click pe Înfrumusețează sau activezi modul live, apoi este stocată în cache. Marcajul tău nu părăsește niciodată pagina — nu există un drum dus-întors la server și nicio încărcare.
Va schimba înfrumusețarea modul în care se redează pagina mea?
Nu. Beautifier-ul doar adaugă și elimină spații albe și întreruperi de linie între taguri. Browserul ignoră acele spații albe când construiește pagina, astfel încât rezultatul redat este identic. Singurul lucru de urmărit este conținutul sensibil la spații albe din interiorul pre, textarea sau elementele inline, pe care formatorul le lasă intenționat neatinse.
Ce face comutatorul pentru CSS și JS inline?
Cu el dezactivat, conținutul blocurilor style și script este lăsat exact așa cum l-ai lipit. Activează-l și CSS-ul din fiecare bloc style trece prin formatorul CSS, iar JavaScript-ul din fiecare bloc script prin formatorul JS, astfel încât codul încorporat este indentat pentru a se potrivi cu marcajul din jur.
Ce face „împachetează la coloana”?
Setează lungimea liniei la care un tag cu multe atribute sau un text lung este întrerupt pe mai multe linii. Lasă-l la 0 pentru a menține fiecare element pe o singură linie, indiferent cât de lung. Setează-l la 80 sau 120 și formatorul împachetează orice depășește acea coloană, ceea ce menține elementele late lizibile într-un editor îngust.
Înfrumusețarea HTML în browser îți oferă marcaj lizibil fără un pas de build sau o încărcare. Lipește o pagină minificată sau dezordonată, alege indentarea și lățimea de împachetare, decide dacă să reformatezi CSS și JS inline, apoi copiază sau descarcă rezultatul. Nimic nu părăsește dispozitivul tău, nu există cont, iar biblioteca se încarcă doar când o ceri, astfel încât deschiderea acestei pagini te costă câțiva kiloocteți în loc de un megaoctet.