HTML biçimlendirici

Bir HTML belgesini ya da parçasını yapıştırın, bu araç onu düzgün girintilerle biçimlendirsin ya da tek satırlık kompakt bir hale getirsin.

Bozuk HTML’de ne olur?

Hiçbir şey bozulmaz. Biçimlendirici, katı bir DOM ağacı yerine token’lar üzerinde çalışan js-beautify kütüphanesini kullanır. Kapatılmamış etiketler, birbirine uymayan kapanış etiketleri ya da <head> içermeyen HTML bile hata vermek yerine yine de girintilenir. 2 boşluk, 4 boşluk ya da tab girintisi arasında seçim yapabilirsiniz. Sıkıştırma da aynı mantıkla çalışır: yorumları silen ve etiketler arası boşlukları toplayan bir dizi metin geçişidir, kapatılmamış ya da hatalı iç içe geçmiş HTML’i düzeltmeye çalışmaz, olduğu gibi bırakır. İki yönde de kırık etiketleri tek tek avlamadan bozuk HTML’i temizleyebilirsiniz.

Sıkıştırma özellikle <pre>, <textarea>, <script> ve <style> etiketlerinin içeriğine dokunmamaya dikkat eder. Bu etiketlerin içindeki boşluk ya anlamlıdır (<pre> bloğundaki satır sonları) ya da sıkıştırmanın bozabileceği gerçek koddur (satır içi JavaScript veya CSS). Araç bu blokları atlar, yalnızca sıradan etiketler arasındaki boşluğa dokunur.

Bunlardan herhangi biri sunucuya yükleniyor mu?

Hayır. Biçimlendirme de sıkıştırma da tamamen tarayıcınızda, sayfaya yüklenen js-beautify kütüphanesi üzerinden çalışır, hiçbir şey bir sunucuya gönderilmez. Yani sayfa şablonları, e-posta HTML’i ya da gerçek müşteri verisi içeren kazınmış parçalar bilgisayarınızdan hiç çıkmadan bu araçtan geçebilir.

Ne işe yarar?

Sık karşılaşılan durumlar: view-source’tan kaydedilmiş sıkıştırılmış bir sayfayı okunabilir hale getirmek, bir HTML e-posta şablonunun dosya boyutunu göndermeden önce küçültmek ya da bir bileşenin işaretlemesini kod incelemesinden önce tutarlı bir girinti genişliğine kavuşturmak. Ters yönde de işe yarar: elle yazılmış, boşlukları tutarsız bir HTML’iniz varsa ve bunu bir yapılandırma değerine ya da data-* niteliğine yapıştırmak için tek satırlık kompakt bir hale getirmek istiyorsanız, sıkıştırma bunu tek adımda yapar.

İki mod arasında geçiş yapmak, bir sayfanın iki sürümünü karşılaştırmanın da hızlı bir yoludur, çünkü fark araçları tutarlı biçimlendirilmiş HTML üzerinde, karışık girinti stillerine göre çok daha iyi çalışır. Statik bir site ya da bir bileşen kütüphanesi yönetiyorsanız, kaynak parçalar farklı yerlerden gelmiş olsa bile, oluşturulmuş ya da kopyalanmış HTML’i commit’lemeden önce buradan geçirmek tüm kod tabanını tutarlı gösterir.