Cantikkan HTML _

Cara pengindahan HTML berfungsi

Pemerelah membaca markup anda tag demi tag, menjejaki seberapa dalam setiap elemen bersarang, dan memancarkannya semula dengan lekukan yang konsisten. Ia tidak pernah mengubah apa yang dirender oleh halaman — hanya cara kod sumber disusun.

1. Hurai tag. Perpustakaan mengimbas input anda kepada aliran token: tag pembuka, tag penutup, kandungan teks, ulasan, dan kandungan blok script serta style. Nilai atribut yang diapit tanda petik dan badan elemen pre serta textarea dikendalikan sebagai unit tunggal, supaya ruang kosong di dalamnya tidak disentuh.
2. Jejak sarang. Semasa mengembara aliran token, pemerelah menyimpan tahap lekukan yang sedang berjalan. Setiap tag pembuka yang bukan penutup sendiri mendalamkan tahap satu langkah; setiap tag penutup yang sepadan mengembalikannya. Kedalaman itu menentukan berapa banyak unit lekukan yang berada di hadapan setiap baris yang anda terima semula.
3. Terapkan pilihan anda. Pilihan lekukan anda (2 ruang, 4 ruang, atau tab) menetapkan lebar satu tahap. Nilai balut-pada-lajur memecahkan baris panjang atribut atau teks apabila ia melepasi lajur yang anda pilih. Had baris kosong meruntuhkan rentetan panjang baris kosong kepada had yang anda pilih.
4. Pancar semula markup. Akhirnya pemformat mencetak tag kembali dengan lekukan dan pemisah baris yang telah diperkirakan. Jika pemformatan sebaris dihidupkan, kandungan setiap blok style dijalankan melalui pemformat CSS dan setiap blok script melalui pemformat JS, supaya kod terbenam berbaris dengan markup di sekelilingnya.

Mengapa cantikkan HTML

• Baca halaman yang diminikan. HTML pengeluaran dihantar dengan pemisah baris yang dicopot untuk menjimatkan bait. Pengindahan memulihkan struktur supaya anda boleh mencari bahagian yang dicari, mengesan tag penutup yang hilang, dan mengikuti cara dokumen sebenarnya bersarang.
• Kemas templat yang tidak konsisten. Markup yang disunting oleh beberapa orang hanyut kepada lekukan dan penempatan tag yang bercampur. Satu laluan melalui pemerelah menormalkan keseluruhan fail, supaya commit seterusnya menunjukkan perubahan yang anda buat dan bukannya dinding ruang kosong yang diformat semula.
• Alat ini tidak membebankan halaman anda. Kebanyakan pemformat dalam talian memuatkan seluruh perpustakaan mereka sejurus anda membuka halaman. Alat ini memuatkan js-beautify secara malas hanya apabila anda mengklik Cantikkan atau menghidupkan mod langsung, jadi membuka halaman hanya memerlukan beberapa kilobait dan bukannya beberapa ratus, dan halaman kekal pantas.
• Tiada apa yang meninggalkan pelayar anda. Semuanya berjalan pada peranti anda. Markup anda tidak pernah dimuat naik ke pelayan, yang penting apabila halaman itu milik klien, mengandungi URL dalaman, atau tertakluk kepada perjanjian kerahsiaan yang telah anda tandatangani.

Aplikasi biasa

Pengindahan HTML timbul apabila seseorang perlu membaca markup yang tidak ditulis untuk dibaca.

• Memeriksa halaman langsung: tampal sumber yang diminikan dari View Source untuk mencari markup di sebalik pepijat susun atur yang tidak boleh anda reproduksi secara setempat.
• Membersihkan output CMS: format semula templat yang dieksport oleh pembina halaman dalam satu baris sebelum anda menghantarnya semula ke repositori.
• Semakan aksesibiliti dan SEO: kembangkan dokumen supaya anda boleh menyemak susunan tajuk, struktur landmark, dan atribut alt terhadap DOM sebenar.

Satu contoh yang dikerjakan

Ambil coretan yang diminikan: <div><p>hi</p><span>x</span></div>. Tampalkan di atas dengan lekukan ditetapkan kepada 2 ruang, kemudian klik Cantikkan. Anda mendapat semula blok yang boleh dibaca: <div> pada barisnya sendiri, <p>hi</p> dan <span>x</span> setiap satu dilekukan satu tahap di bawahnya, dan </div> yang sepadan berbaris di bawah. Tukar lekukan kepada Tab dan setiap tahap beralih dari dua ruang kepada aksara tab. Tambah blok <style>a{color:red}</style>, hidupkan "Format juga CSS & JS sebaris," dan peraturan itu meluas ke barisnya yang dilekukan sendiri dan bukannya kekal dalam satu baris.

FAQ

Adakah ini berjalan di pelayar saya?

Ya. Perpustakaan js-beautify dimuatkan secara malas kali pertama anda mengklik Cantikkan atau mendayakan mod langsung, kemudian dicache. Markup anda tidak pernah meninggalkan halaman — tiada perjalanan pergi balik pelayan dan tiada muat naik.

Adakah pengindahan akan mengubah cara halaman saya dirender?

Tidak. Pemerelah hanya menambah dan mengalih keluar ruang kosong dan pemisah baris antara tag. Pelayar mengabaikan ruang kosong itu semasa membina halaman, jadi hasil yang dirender adalah sama. Satu perkara yang perlu diperhatikan ialah kandungan yang sensitif terhadap ruang kosong di dalam pre, textarea, atau elemen sebaris, yang sengaja dibiarkan tidak disentuh oleh pemformat.

Apakah yang dilakukan oleh togol CSS dan JS sebaris?

Dengan ia dimatikan, kandungan blok style dan script dibiarkan tepat seperti yang anda tampalkan. Hidupkannya dan CSS di dalam setiap blok style dijalankan melalui pemformat CSS dan JavaScript di dalam setiap blok script melalui pemformat JS, supaya kod terbenam dilekukan untuk sepadan dengan markup di sekelilingnya.

Apakah yang dilakukan oleh "Balut pada lajur"?

Ia menetapkan panjang baris di mana tag dengan banyak atribut, atau rentetan teks yang panjang, dipecah ke beberapa baris. Biarkan pada 0 untuk mengekalkan setiap elemen pada satu baris tidak kira betapa panjangnya. Tetapkan pada 80 atau 120 dan pemformat membalut apa sahaja yang melepasi lajur tersebut, yang mengekalkan elemen yang lebar boleh dibaca dalam editor yang sempit.

Pengindahan HTML bahagian pelayar memberi anda markup yang boleh dibaca tanpa langkah binaan atau muat naik. Tampal halaman yang diminikan atau tidak kemas, pilih lekukan dan lebar balut anda, putuskan sama ada hendak memformat CSS dan JS sebaris, kemudian salin atau muat turun hasilnya. Tiada apa yang meninggalkan peranti anda, tiada akaun, dan perpustakaan hanya dimuatkan apabila anda memintanya — jadi membuka halaman ini hanya memerlukan beberapa kilobait, bukan satu megabait.