Untangle messy HTML into clean, indented markup

Liitä mikä tahansa HTML – jopa yksiriviinen pienennetty tuloste käännösputkesta – niin työkalu muotoilee sen uudelleen oikealla sisennyksellä, yksi tagi riviä kohden ja yhtenäisellä välistyksellä. Valitse 2, 4 tai 8 välilyönnin sisennys. Tuloste on valmis pudotettavaksi editoriin tai liitettäväksi koodikatselmoinnin kommenttiin.

Siistiminen laajentaa HTML:n luettavuuden parantamiseksi: jokainen tagi omalla rivillään, sisäkkäiset lapset sisennettyinä ja tyhjät rivit säilytettyinä osioiden välissä. Tiivistys poistaa kommentit, kutistaa peräkkäiset välilyönnit ja poistaa rivinvaihdot, jolloin tiedosto vie vähemmän tavuja. Käytä siistimistä muokkaamiseen ja tarkistamiseen, tiivistystä tuotantokäyttöön.

Ei — js-beautify (konepellin alla oleva moottori) tunnistaa script- ja style-lohkot ja muotoilee niiden sisällön asianmukaisilla JS- tai CSS-säännöillä, joten upotetut skriptit pysyvät kelvollisina ja tyylitiedostot luettavina. Itsesulkeutuvat tagit, tyhjät elementit ja nimiavaruusattribuutit (svg:xmlns, xlink:href) käsitellään kaikki oikein.

Se käsittelee tavallista HTML:ää ja HTML-tyyppisiä mallipohjia hyvin, mutta puhdas JSX (aaltosulkeisilmaisut, fragmentit, isolla alkukirjaimella kirjoitetut komponenttitunnisteet) jäsennetään HTML:nä ja voi saada pieniä kosmeettisia virheitä. Kehyskohtaiseen koodiin suosittelemme Prettieriä, joka on määritetty käyttämällesi murteelle; raa'alle HTML:lle, .htm-tiedostoille ja mallipohjille työkalumme on täydellinen.

Mitään ei lähetetä. Muotoilija toimii kokonaan selaimessasi js-beautifyn avulla, joten voit turvallisesti liittää sisäisiä sivupohjia, sähköpostiluonnoksia tai yksityistä tietoa sisältävää HTML:ää ilman, että mitään poistuu laitteeltasi.

Pakkaaminen poistaa HTML-kommentit, tiivistää tagien väliset peräkkäiset välilyönnit yhdeksi välilyönniksi ja poistaa rivinvaihdot. Tuloksena on HTML, joka renderöityy tavulleen samanlaisena mutta on tyypillisesti 10–30 % pienempi. Yhdistettynä palvelimen gzip-pakkaukseen tämä keventää sivun alkulatauksen kokoa huomattavasti sisältörikkailla sivuilla.

Kyllä — napsauta Lataa tallentaaksesi siistityn tuloksen nimellä output.html tai pienennetyn tuloksen nimellä output.min.html. Tiedosto on UTF-8-koodattu, joten se toimii yhtä hyvin englannin, kyrillisen, CJK:n ja oikealta vasemmalle luettavan sisällön kanssa.

Se on pieni, vain selaimessa toimiva työkalu — nollahosting-kustannukset — joten tarjoamme sen ilmaiseksi osana kehittäjien työkalupakkiamme. Ei mainoksia, ei tulosteen seurantaa, ei tiedostokokorajoituksia muuten kuin sen verran kuin selaimesi pystyy muistissaan käsittelemään.

Kaunista-tilassa voit valita 2, 4 tai 8 välilyönnin sisennyksen. Valitse editorisi tai koodityylisi käyttämä leveys ja kopioi sitten tulos tai lataa se nimellä output.html, jotta muotoilu siirtyy suoraan projektiisi.

Sisennysvalitsin (2, 4 tai 8 välilyöntiä) koskee vain Kaunista-tilaa, koska Minimoi poistaa kaikki välilyönnit ja rivinvaihdot suunnitellusti — sisennettävää ei ole jäljellä. Vaihda takaisin Kaunista-tilaan nähdäksesi sisennysleveyden vaikuttavan taas.

Kun liität tai muokkaat, työkalu suorittaa automaattisesti rakennetarkistuksen ja listaa kaikki sulkemattomat, täsmäämättömät tai ylimääräiset lopetustagit suoraan tulostepaneelin alla — erillistä painiketta ei tarvita. Vihreä "Rakenneongelmia ei löytynyt" -viesti vahvistaa, että merkintä on hyvin muodostettu.

Käytä Kaunista-tilaa 2 välilyönnin sisennyksellä — se on yleisin käytäntö ja pitää diffit tiiviinä — ja tarkista sitten rakenneongelmapaneeli varmistaaksesi, ettei sulkematonta tagia ole jäänyt. Kun olet tarkistanut, vaihda Pienennä-tilaan ennen tuotantoon vientiä poistaaksesi ylimääräiset välit takaisin.

Kyllä — vedä .html-, .htm- tai .xhtml-tiedosto latausalueelle tai napsauta selataksesi, niin sen sisältö latautuu suoraan syöttökenttään täsmälleen kuin olisit liittänyt sen. Sieltä Kaunista, Pienennä, sisennysleveys ja rakennetarkistin toimivat kaikki samalla tavalla riippumatta siitä, tuliko merkintä tiedostosta vai liittämällä.

Kyllä — kun tuloste on olemassa, Kopioi-painike ilmestyy tulostepaneelin ja ensisijaisen toimintoalueen viereen. Sen napsauttaminen kopioi nykyisen Kaunista- tai Pienennä-tuloksen leikepöydällesi välittömästi (se näyttää hetken 'Copied!' vahvistuksena), joten voit liittää sen suoraan editoriisi tai koodikatselmoinnin kommenttiin tallentamatta väliaikaista .html-tiedostoa.