Come funziona l'abbellimento HTML
L'abbellitore legge il tuo markup tag per tag, tiene traccia del livello di annidamento di ogni elemento e lo riemette con rientro coerente. Non cambia mai cosa la pagina renderizza — solo come è organizzato il codice sorgente.
- Analizzare i tag. La libreria analizza il tuo input in un flusso di token: tag di apertura, tag di chiusura, contenuto testuale, commenti e il contenuto dei blocchi script e style. I valori degli attributi tra virgolette e il corpo degli elementi pre e textarea vengono trattati come unità singole, quindi gli spazi bianchi al loro interno vengono lasciati intatti.
- Tracciare l'annidamento. Mentre percorre il flusso di token, l'abbellitore mantiene un livello di rientro corrente. Ogni tag di apertura che non è autochiudente approfondisce il livello di un passo; ogni tag di chiusura corrispondente lo risale. Tale profondità decide quante unità di rientro precedono ogni riga restituita.
- Applicare le tue opzioni. La tua scelta di rientro — 2 spazi, 4 spazi o una tabulazione — imposta la larghezza di un livello. Il valore di a capo alla colonna spezza le righe lunghe di attributi o testo non appena superano la colonna scelta. Il limite delle righe vuote riduce le lunghe sequenze di righe vuote al massimo scelto.
- Riemettere il markup. Infine, il formattatore stampa i tag con il rientro e le interruzioni di riga calcolati. Se hai attivato la formattazione inline, il contenuto di ogni blocco style passa per il formattatore CSS e ogni blocco script per il formattatore JS, in modo che il codice incorporato sia indentato coerentemente con il markup circostante.
Perché abbellire HTML
- Leggere pagine minificate. L'HTML di produzione viene distribuito senza interruzioni di riga per risparmiare byte. Abbellirlo ripristina la struttura in modo da poter trovare la sezione cercata, individuare un tag di chiusura mancante e capire come il documento si annida realmente.
- Sistemare template incoerenti. Il markup che più persone hanno modificato deriva verso rientri e posizionamenti di tag misti. Una singola passata nell'abbellitore normalizza l'intero file, così il prossimo commit mostra la modifica apportata invece di una parete di spazi riformattati.
- Non rallenta la tua pagina. La maggior parte dei formattatori online carica l'intera libreria nel momento in cui apri la pagina. Questo carica js-beautify solo quando fai clic su Abbellisci o attivi la Modalità live, quindi il primo caricamento costa pochi kilobyte invece di qualche centinaio e la pagina rimane veloce.
- Nulla lascia il tuo browser. Tutto gira sul tuo dispositivo. Il tuo markup non viene mai caricato su un server, il che conta quando la pagina appartiene a un cliente, contiene URL interne o è soggetta a un accordo di riservatezza.
Applicazioni comuni
Abbellire HTML si rende necessario ogni volta che qualcuno deve leggere markup che non è stato scritto per essere letto.
- Ispezionare una pagina in produzione: incolla il codice sorgente minificato da Visualizza sorgente per trovare il markup dietro un bug di layout che non riesci a riprodurre in locale.
- Pulire l'output di un CMS: riformatta un template che un page builder ha esportato in una sola riga prima di confermarlo nel repository.
- Revisioni di accessibilità e SEO: espandi il documento per verificare l'ordine dei titoli, la struttura dei landmark e gli attributi alt rispetto al DOM reale.
Un esempio pratico
Prendi un frammento minificato: <div><p>hi</p><span>x</span></div>. Incollalo sopra con rientro di 2 spazi e fai clic su Abbellisci. Ottieni un blocco leggibile: il <div> sulla propria riga, il <p>hi</p> e il <span>x</span> ognuno indentato di un livello, e il </div> corrispondente allineato sotto. Cambia il rientro a Tabulazioni e ogni livello passa da due spazi a una tabulazione. Aggiungi un blocco <style>a{color:red}</style>, attiva «Formatta anche CSS e JS inline» e la regola si espande sulle proprie righe indentate invece di restare su una sola.
FAQ
Questo gira nel mio browser?
Sì. La libreria js-beautify viene caricata in modo lazy la prima volta che fai clic su Abbellisci o attivi la Modalità live, poi viene messa in cache. Il tuo markup non lascia mai la pagina — nessun round-trip al server, nessun upload.
L'abbellimento cambierà come si renderizza la mia pagina?
No. L'abbellitore aggiunge e rimuove solo spazi bianchi e interruzioni di riga tra i tag. Il browser ignora questi spazi quando costruisce la pagina, quindi il risultato visualizzato è identico. L'unico aspetto da tenere d'occhio è il contenuto sensibile agli spazi all'interno di pre, textarea o elementi inline, che il formattatore lascia deliberatamente intatto.
Cosa fa l'interruttore CSS e JS inline?
Con esso disattivato, il contenuto dei blocchi style e script viene lasciato esattamente come lo hai incollato. Attivandolo, il CSS all'interno di ogni blocco style passa per il formattatore CSS e il JavaScript all'interno di ogni blocco script per il formattatore JS, in modo che il codice incorporato sia indentato in accordo con il markup circostante.
Cosa fa «A capo alla colonna»?
Imposta la lunghezza di riga oltre la quale un tag con molti attributi, o un testo lungo, viene spezzato su più righe. Lascia a 0 per tenere ogni elemento su una singola riga indipendentemente dalla lunghezza. Imposta a 80 o 120 e il formattatore va a capo su tutto ciò che supera quella colonna, mantenendo gli elementi larghi leggibili in un editor stretto.
L'abbellimento HTML lato browser ti dà markup leggibile senza un passaggio di compilazione né un upload. Incolla una pagina minificata o disordinata, scegli il rientro e la larghezza di a capo, decidi se riformattare il CSS e JS inline, poi copia o scarica il risultato. Nulla lascia il tuo dispositivo, non ci sono account e la libreria si carica solo quando la richiedi — aprire questa pagina ti costa pochi kilobyte, non un megabyte.