Untangle messy HTML into clean, indented markup

Lim inn hvilken som helst HTML – selv minifisert utdata på én linje fra en byggepipeline – så formaterer verktøyet den på nytt med riktig innrykk, én tag per linje og konsekvent mellomrom. Velg innrykk på 2, 4 eller 8 mellomrom. Resultatet er klart til å settes inn i editoren din eller limes inn i en kommentar i en kodegjennomgang.

Forskjønn utvider HTML for lesbarhet: hver tag på sin egen linje, nøstede underelementer med innrykk og tomme linjer bevart mellom seksjoner. Minimer fjerner kommentarer, komprimerer sammenhengende mellomrom og fjerner linjeskift slik at filen leveres med færre byte. Bruk forskjønn for redigering og gjennomgang, minimer for produksjonsutrulling.

Nei – js-beautify (motoren under panseret) oppdager script- og style-blokker og formaterer innholdet deres med de riktige JS- eller CSS-reglene, slik at innebygde skript forblir gyldige og stilark forblir lesbare. Selvlukkende tagger, tomme elementer og navneromsattributter (svg:xmlns, xlink:href) håndteres alle korrekt.

Det håndterer ren HTML og HTML-lignende maler godt, men ren JSX (uttrykk i krøllparenteser, fragmenter, komponenttagger med stor forbokstav) tolkes som HTML og kan få mindre kosmetiske feil. For rammeverkspesifikk kode anbefaler vi Prettier konfigurert for din dialekt; for ren HTML, .htm og malfiler er verktøyet vårt perfekt.

Ingen opplasting skjer. Formateringsverktøyet kjører fullstendig i nettleseren din med js-beautify, så du trygt kan lime inn interne sidemaler, e-postutkast eller HTML med private data uten at noe forlater enheten din.

Minifisering fjerner HTML-kommentarer, slår sammen alle sammenhengende mellomrom mellom tagger til ett enkelt mellomrom og fjerner linjeskift. Resultatet er HTML som gjengis bytenøyaktig likt, men som typisk er 10–30 % mindre. Kombinert med gzip på serveren reduserer dette innledende sidevekt merkbart på innholdstunge sider.

Ja — klikk Last ned for å lagre det formaterte resultatet som output.html eller det minifiserte resultatet som output.min.html. Filen er UTF-8-kodet, så den fungerer like godt med engelsk, kyrillisk, CJK og høyre-til-venstre-innhold.

Det er et lite verktøy som kun kjører i nettleseren – null hostingkostnad – så vi tilbyr det gratis som en del av utviklerverktøysettet vårt. Ingen annonser, ingen sporing av resultatet, ingen grense for filstørrelse utover det nettleseren din kan holde i minnet.

Forskjønnings-modus lar deg velge 2, 4 eller 8 mellomrom innrykk. Velg bredden som editoren eller kodestilen din bruker, og kopier deretter resultatet eller last det ned som output.html slik at formateringen overføres rett inn i prosjektet ditt.

Innrykksvelgeren (2, 4 eller 8 mellomrom) gjelder bare i Forskjønn-modus, siden Minifiser fjerner alle mellomrom og linjeskift etter design — det er ingenting igjen å rykke inn. Bytt tilbake til Forskjønn for å se innrykksbredden tre i kraft igjen.

Mens du limer inn eller redigerer, kjører verktøyet automatisk en strukturkontroll og lister opp alle uavsluttede, feilmatchede eller løse sluttagger rett under utdatapanelet — ingen egen knapp nødvendig. En grønn melding, «Ingen strukturfeil funnet», bekrefter at markupen er velformet.

Bruk Prettify-modus med 2-mellomroms innrykk – det er den vanligste konvensjonen og holder diffene kompakte – og sjekk deretter panelet for strukturelle problemer for å bekrefte at de ikke har etterlatt en ulukket tag. Når det er gjennomgått, bytt til Minify-modus før du sender til produksjon for å fjerne den ekstra tomplassen igjen.

Ja — dra en .html-, .htm- eller .xhtml-fil til opplastingsområdet, eller klikk for å bla, så lastes innholdet rett inn i inndataboksen nøyaktig som om du hadde limt det inn. Derfra fungerer Forskjønn, Minimer, innrykksbredde og strukturkontrollen helt likt uansett om markeringen kom fra en fil eller en innliming.

Ja — når det finnes utdata, vises en Kopier-knapp ved siden av utdatapanelet og hovedhandlingsområdet. Å klikke på den kopierer det gjeldende Forskjønn- eller Minimer-resultatet til utklippstavlen umiddelbart (den viser kort «Copied!» som bekreftelse), så du kan lime det rett inn i editoren din eller en kodegjennomgangskommentar uten å lagre en midlertidig .html-fil.