Cara kerja pengindahan HTML
Pemerelah membaca markup Anda tag demi tag, melacak seberapa dalam setiap elemen bersarang, dan memancarkanya kembali dengan indentasi yang konsisten. Ia tidak pernah mengubah apa yang dirender halaman — hanya bagaimana kode sumber disusun.
- Urai tag. Pustaka memindai input Anda menjadi aliran token: tag pembuka, tag penutup, konten teks, komentar, dan isi blok script serta style. Nilai atribut yang diapit tanda kutip dan isi elemen pre serta textarea diperlakukan sebagai unit tunggal, sehingga spasi di dalamnya tidak disentuh.
- Lacak sarang. Saat menelusuri aliran token, pemerelah menyimpan level indentasi yang berjalan. Setiap tag pembuka yang bukan self-closing memperdalam level satu langkah; setiap tag penutup yang sepadan mengembalikannya. Kedalaman itu menentukan berapa banyak unit indentasi yang berada di depan setiap baris yang Anda terima kembali.
- Terapkan pilihan Anda. Pilihan indentasi Anda (2 spasi, 4 spasi, atau tab) menetapkan lebar satu level. Nilai bungkus-pada-kolom memecah baris panjang atribut atau teks ketika melewati kolom yang Anda pilih. Batas baris kosong meratakan rentetan panjang baris kosong hingga batas yang Anda tetapkan.
- Pancarkan ulang markup. Akhirnya pemformat mencetak tag kembali dengan indentasi dan jeda baris yang telah dihitung. Jika pemformatan sebaris diaktifkan, isi setiap blok style dijalankan melalui pemformat CSS dan setiap blok script melalui pemformat JS, sehingga kode yang tertanam sejajar dengan markup di sekelilingnya.
Mengapa memperindah HTML
- Baca halaman yang diminify. HTML produksi dikirim tanpa jeda baris untuk menghemat byte. Pengindahan memulihkan struktur sehingga Anda bisa menemukan bagian yang dicari, mendeteksi tag penutup yang hilang, dan mengikuti cara dokumen sesungguhnya bersarang.
- Rapikan template yang tidak konsisten. Markup yang diedit banyak orang melayang ke indentasi dan penempatan tag yang campur aduk. Satu kali melewati pemerelah menormalkan seluruh file, sehingga commit berikutnya menampilkan perubahan yang Anda buat dan bukan dinding spasi yang diformat ulang.
- Alat ini tidak membebani halaman Anda. Kebanyakan pemformat online memuat seluruh pustaka begitu Anda membuka halaman. Alat ini lazy-load js-beautify hanya saat Anda mengklik Cantikkan atau mengaktifkan mode langsung, jadi membuka halaman hanya memerlukan beberapa kilobyte alih-alih beberapa ratus, dan halaman tetap cepat.
- Tidak ada yang meninggalkan peramban Anda. Semuanya berjalan di perangkat Anda. Markup Anda tidak pernah diunggah ke server, yang penting ketika halaman milik klien, berisi URL internal, atau berada di bawah perjanjian kerahasiaan yang telah Anda tandatangani.
Aplikasi umum
Pengindahan HTML muncul setiap kali seseorang perlu membaca markup yang tidak ditulis untuk dibaca.
- Memeriksa halaman langsung: tempel sumber yang diminify dari View Source untuk menemukan markup di balik bug tata letak yang tidak bisa Anda reproduksi secara lokal.
- Membersihkan output CMS: format ulang template yang diekspor oleh pembuat halaman dalam satu baris sebelum Anda mengirimnya kembali ke repositori.
- Tinjauan aksesibilitas dan SEO: perluas dokumen agar Anda bisa memeriksa urutan heading, struktur landmark, dan atribut alt terhadap DOM yang sebenarnya.
Contoh yang dikerjakan
Ambil snippet yang diminify: <div><p>hi</p><span>x</span></div>. Tempel di atas dengan indentasi diatur ke 2 spasi, lalu klik Cantikkan. Anda mendapatkan kembali blok yang mudah dibaca: <div> pada barisnya sendiri, <p>hi</p> dan <span>x</span> masing-masing diindentasi satu level di bawahnya, dan </div> yang sepadan berbaris di bawah. Ganti indentasi ke Tab dan setiap level beralih dari dua spasi ke karakter tab. Tambahkan blok <style>a{color:red}</style>, aktifkan "Format juga CSS & JS sebaris," dan aturan tersebut meluas ke barisnya sendiri yang diindentasi alih-alih tetap dalam satu baris.
FAQ
Apakah ini berjalan di peramban saya?
Ya. Pustaka js-beautify dimuat secara lazy pertama kali Anda mengklik Cantikkan atau mengaktifkan mode langsung, lalu di-cache. Markup Anda tidak pernah meninggalkan halaman — tidak ada round-trip ke server dan tidak ada unggahan.
Apakah pengindahan akan mengubah cara halaman saya dirender?
Tidak. Pemerelah hanya menambah dan menghapus spasi serta jeda baris di antara tag. Peramban mengabaikan spasi itu saat membangun halaman, jadi hasil yang dirender identik. Satu hal yang perlu diperhatikan adalah konten yang sensitif terhadap spasi di dalam pre, textarea, atau elemen inline, yang sengaja dibiarkan tidak disentuh oleh formatter.
Apa yang dilakukan toggle CSS dan JS sebaris?
Saat dimatikan, isi blok style dan script dibiarkan tepat seperti yang Anda tempel. Aktifkan dan CSS di dalam setiap blok style dijalankan melalui pemformat CSS serta JavaScript di dalam setiap blok script melalui pemformat JS, sehingga kode yang tertanam diindentasi agar sesuai dengan markup di sekelilingnya.
Apa yang dilakukan "Bungkus pada kolom"?
Ini menetapkan panjang baris di mana tag dengan banyak atribut, atau rangkaian teks yang panjang, dipecah menjadi beberapa baris. Biarkan 0 untuk menjaga setiap elemen pada satu baris tidak peduli seberapa panjangnya. Tetapkan ke 80 atau 120 dan pemformat membungkus apa pun yang melewati kolom tersebut, menjaga elemen yang lebar tetap mudah dibaca dalam editor yang sempit.
Pengindahan HTML di sisi peramban memberi Anda markup yang bisa dibaca tanpa langkah build atau unggahan. Tempel halaman yang diminify atau berantakan, pilih indentasi dan lebar pembungkusan Anda, putuskan apakah akan memformat ulang CSS dan JS sebaris, lalu salin atau unduh hasilnya. Tidak ada yang meninggalkan perangkat Anda, tidak ada akun, dan pustaka hanya dimuat saat Anda memintanya — sehingga membuka halaman ini hanya memerlukan beberapa kilobyte, bukan satu megabyte.