Untangle messy HTML into clean, indented markup

Klistra in valfri HTML – även minifierad enradsutdata från en byggpipeline – så formaterar verktyget om den med korrekt indrag, en tagg per rad och enhetliga blanksteg. Välj indrag på 2, 4 eller 8 blanksteg. Resultatet är klart att släppa in i din editor eller klistra in i en kommentar vid kodgranskning.

Prettify expanderar HTML för läsbarhet: varje tagg på en egen rad, inkapslade element indenterade och tomma rader bevarade mellan sektioner. Minify tar bort kommentarer, slår ihop sammanhängande blanksteg och tar bort radbrytningar så att filen levereras med färre byte. Använd prettify för redigering och granskning, minify för produktionsdistribution.

Nej – js-beautify (motorn bakom kulisserna) upptäcker script- och style-block och formaterar deras innehåll med rätt JS- eller CSS-regler, så inline-skript förblir giltiga och stilmallar förblir läsbara. Självstängande taggar, void-element och namnrymdsattribut (svg:xmlns, xlink:href) hanteras alla korrekt.

Det hanterar vanlig HTML och HTML-liknande mallar väl, men ren JSX (uttryck med klammerparenteser, fragment, komponenttaggar med stor begynnelsebokstav) tolkas som HTML och kan få mindre kosmetiska problem. För ramverksspecifik kod rekommenderar vi Prettier konfigurerad för din dialekt; för ren HTML, .htm och mallfiler är vårt verktyg perfekt.

Ingen uppladdning sker. Formateraren körs helt i din webbläsare med js-beautify, så du kan tryggt klistra in interna sidmallar, mejlutkast eller HTML som innehåller privata data utan att något lämnar din enhet.

Minifiering tar bort HTML-kommentarer, slår ihop alla följder av blanktecken mellan taggar till ett enda mellanslag och tar bort radbrytningar. Resultatet är HTML som renderas bytefor-byte identiskt men som vanligtvis är 10–30 % mindre. Kombinerat med gzip på servern minskar detta den ursprungliga sidvikten märkbart på innehållstunga sidor.

Ja — klicka på Ladda ner för att spara det formaterade resultatet som output.html eller det minifierade resultatet som output.min.html. Filen är UTF-8-kodad, så den fungerar lika bra med engelskt, kyrilliskt, CJK- och höger-till-vänster-innehåll.

Det är ett litet verktyg som körs enbart i webbläsaren – noll värdkostnad – så vi erbjuder det gratis som en del av vår utvecklarverktygslåda. Inga annonser, ingen spårning av resultatet, inga begränsningar för filstorlek utöver vad din webbläsare kan rymma i minnet.

Prettify-läget låter dig välja 2, 4 eller 8 blanksteg i indrag. Välj den bredd din redigerare eller kodstil använder, kopiera sedan resultatet eller ladda ner det som output.html så att formateringen förs över direkt till ditt projekt.

Indragsväljaren (2, 4 eller 8 mellanslag) gäller bara i läget Snygga till, eftersom Minifiera avsiktligt tar bort alla blanksteg och radbrytningar — det finns inget kvar att dra in. Byt tillbaka till Snygga till för att se indragsbredden träda i kraft igen.

När du klistrar in eller redigerar kör verktyget automatiskt en strukturkontroll och listar eventuella ostängda, felmatchade eller lösa sluttaggar direkt under utdatapanelen — ingen separat knapp behövs. Ett grönt meddelande, "Inga strukturproblem hittades", bekräftar att märkspråket är korrekt uppbyggt.

Använd Försköna-läge med 2 blankstegs indrag – det är den vanligaste konventionen och håller diffar kompakta – och kontrollera sedan panelen för strukturella problem för att bekräfta att de inte har lämnat en oavslutad tagg. När det är granskat, växla till Minifiera-läge innan du skickar till produktion för att strippa bort de extra blanktecknen igen.

Ja — dra en .html-, .htm- eller .xhtml-fil till uppladdningsytan, eller klicka på den för att bläddra, så laddas dess innehåll direkt in i inmatningsrutan precis som om du hade klistrat in det. Därifrån fungerar Snygga till, Minifiera, indragsbredd och den strukturella kontrollen exakt likadant oavsett om koden kom från en fil eller från inklistring.

Ja — när det finns utdata visas en Kopiera-knapp bredvid utdatapanelen och det primära åtgärdsområdet. Att klicka på den kopierar det aktuella resultatet från Snygga till eller Minifiera till urklipp direkt (den visar kort 'Kopierat!' som bekräftelse), så att du kan klistra in direkt i din redigerare eller en kodgranskningskommentar utan att spara en mellanliggande .html-fil.