Miten sisennän sotkuisen HTML:n?

Liitä HTML-koodisi Kaunista-valinta valittuna ja aseta sitten Sisennykseksi 2 välilyöntiä, 4 välilyöntiä tai Sarkaimet. Tulos päivittyy kirjoittaessasi, ja voit kopioida sen tai ladata .html-tiedoston. Lataa esimerkki näyttää näytteen.

Voiko se rivityttää pitkiä rivejä tai muotoilla sisäistä CSS:ää ja JavaScriptiä?

Kyllä. Rivitä tarjoaa vaihtoehdot Ei rivitystä, 80 saraketta tai 120 saraketta, ja valinta Muotoile style- ja script-tagit muotoilee myös niiden sisällä olevan CSS:n ja JavaScriptin. Sisältö pre- ja textarea-elementeissä jätetään täsmälleen ennalleen.

Miten pienennän HTML:n tuotantoa varten?

Valitse Pienennä. Tagien välinen tyhjä tila tiivistetään ja kommentit poistetaan, ellet rastita Säilytä kommentit -valintaa. Valinnaiset valintaruudut ovat Poista valinnaiset lainausmerkit, Lyhennä boolean-attribuutit ja upotetun tyylin, skriptin ja style-attribuuttien pienentäminen.

Rikkooko pienentäminen pre-lohkoni tai skriptini?

Pre-, script-, style- ja textarea-elementtien sisältöä suojataan tyhjän tilan tiivistyksen aikana, ja vierekkäisten sisätason elementtien väliin jätetään välilyönti, jotta sanat eivät sulaudu yhteen. Valinnainen upotettu pienennys koskee vain, jos rastitat sen.

Lähetetäänkö HTML-koodini palvelimelle?

Ei. Sivulle rakennettu tokenizer käsittelee merkinnän selaimessasi, joten yksityiset mallipohjat ja sähköposti-HTML pysyvät laitteellasi. Mitään kolmannen osapuolen muotoilukirjastoa ei ladata.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

🌐

HTML-kaunistaja ja -pienentäjä ilmaiseksi

Muotoile tai pienennä HTML oikealla sisennyssyvyydellä. Säilyttää sisällön <pre>-, <script>- ja <style>-lohkojen sisällä.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Sisennys:

Rivitys:

Muotoile <style> ja <script>

Pudota tiedosto tähän tai valitse napsauttamalla

HTML, HTM · käsitellään laitteellasi

tai liitä leikepöydältä painamalla Ctrl+V

Selaa tiedostoja

HTML-syöte

Muotoiltu HTML

Tulos näkyy tässä…

Yleiset käyttötavat

Palvelimen renderöimän HTML:n virheenkorjausNäytä raa'at HTML-tuotokset palvelimeltasi (PHP, Rails, Django, Node) luettavassa sisennettävässä muodossa.
Muotoile sähköpostin HTML-mallitSähköpostin HTML on runsasta (taulukot, sisäiset tyylit). Muotoile sen muokattavaksi ja ylläpidettäväksi.
Muotoile staattiset HTML-sivutManuaalisesti muokatut staattiset HTML-tiedostot hyötyvät johdonmukaisesta muotoilusta yhteistoiminnallista muokkausta varten.
Puhdista CMS:n viennissä oleva HTMLWordPress, Wix ja Squarespace vievät HTML:ää monilla artefakteilla. Muotoile sen muokattavaksi.
Pienennä HTML tuotantoa vartenVähennä HTML-tiedoston kokoa nopeampaa sivustojen lataamista varten poistamalla välilyönnit ja tarpeettomat merkit.

Miten se toimii

Tämä työkalu muotoilee tai tiivistää HTML:ää käsin kirjoitetulla tagi-tietoisella tokenisoijalla, joka on rakennettu suoraan sivuun — ei kolmannen osapuolen muotoilukirjastoa, ei palvelinkierrosta. Jokainen merkintäsi merkki käsitellään paikallisesti selaimessa heti kirjoittaessasi tai liittäessäsi sen.

1
Tokenisoija skannaa merkinnän
Mukautettu merkki kerrallaan toimiva skanneri kulkee HTML-merkkijonon läpi, tunnistaen kommentit, DOCTYPE-määrittelyt, avaavat tagit, sulkevat tagit, itsestään sulkeutuvat tyhjät elementit (br, img, input jne.) ja raakoja tekstisolmuja. Erillinen apuohjelma seuraa lainattuja attribuuttiarvoja, jotta merkit kuten > attribuutin sisällä (esim. value="a>b") eivät koskaan aiheuta tagin ennenaikaista jakautumista.
2
Sisennyssyvyys seurataan tagia kohti
Kaunistustilassa tokenisoija ylläpitää syvyyslaskuria. Lohkotason avaavat tagit kasvattavat syvyyttä; sulkevat tagit vähentävät sitä ennen kirjoittamista. Inline-elementit (span, a, strong, em jne.) pidetään samalla rivillä sisältönsä kanssa sen sijaan, että ne työnnettäisiin omalle sisennetylle rivilleen. Tageilla kuten pre, script, style ja textarea niiden sisäsisältö tulostetaan sanatarkasti, jotta ei vahingoiteta välilyöntiherkkää tai suoritettavaa koodia.
3
Tiivistin supistaa välilyönnit turvallisesti
Tiivistystilassa pre-, script-, style- ja textarea-lohkojen sisältö vaihdetaan numeroituihin sijaismerkkeihin ennen minkään välilyöntisupistuksen tapahtumista. HTML-kommentit poistetaan, ja tagien väliset välilyöntijaksot poistetaan — paitsi vierekkäisten inline-elementtien välissä, joissa yksi väli säilytetään, jotta sanat eivät sulaudu yhteen. Sijaismerkit palautetaan sitten alkuperäiseen sisältöönsä.
4
Tuloste näytetään ja valinnaisesti tallennetaan
Muotoiltu tai tiivistetty tulos ilmestyy reaaliajassa tulostepaneeliin kokomuutosprosentin kera. Voit kopioida sen leikepöydälle tai ladata sen .html-tiedostona, kaikki ilman selaimesta poistumista.