HTML Formatter – kaunista ja pienennä HTML:ää verkossa ilmaiseksi

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 – muotoilutyökalu tunnistaa script- ja style-lohkot ja muotoilee niiden sisällön sopivilla JS- tai CSS-säännöillä, joten sisäiset komentosarjat pysyvät kelvollisina ja tyylitiedostot luettavina. Itsesulkeutuvat tagit, tyhjät elementit ja nimiavaruusattribuutit (svg:xmlns, xlink:href) käsitellään 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 ladata palveluun. Muotoilutyökalu toimii kokonaan selaimessasi, joten voit liittää sisäisiä sivupohjia, sähköpostiluonnoksia tai yksityisiä tietoja sisältävää HTML:llää turvallisesti 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.

Ei – HTML Prettify toimii kokonaan selaimessasi, joten se, mitä liität, ei koskaan poistu koneelta, jolla käytät. Tällä on merkitystä, jos tarkistat jotain, joka sisältää tunnuksen, avaimen tai asiakastietoja. Välilehden sulkeminen riittää tyhjentämään sen.

Ensimmäisessä paikassa olevat virhekohdat, joita ei voitu jäsentää, mikä on yleensä heti todellisen virheen jälkeen eikä sen päällä – puuttuva pilkku, sulkematon lainaus tai hakasulku tai dokumentista liitetty älykäs lainaus suoran sijaan. Tarkista ensin raportoidun sijainnin yläpuolella oleva rivi.

Ei molemmille. HTML Prettify on ilmainen, latauksessasi ei ole vesileimaa, eikä mitään pyydetä lopussa – ei ole mitään järkeä prosessissa, jossa lopetat työn ja huomaat sen maksavan.

Ei. HTML Prettify toimii selaimessa tietokoneella ja puhelimella. Mitään ei tarvitse asentaa, kokeilua aloittaa tai lisenssiä ostaa ennen kuin näet, sopiiko se tarpeeseesi. Kokeile sitä omalla ongelmatiedostollasi esimerkin sijaan.