HTML güzelleştirme nasıl çalışır
Güzelleştirici markup'ınızı etiket etiket okur, her öğenin ne kadar derin iç içe olduğunu izler ve tutarlı girinti ile yeniden yayar. Sayfanın oluşturduğu şeyi hiçbir zaman değiştirmez — yalnızca kaynak kodun nasıl düzenlendiğini.
- Etiketleri ayrıştırma. Kütüphane girdinizi bir belirteç akışına tarar: açılış etiketleri, kapanış etiketleri, metin içeriği, yorumlar ve script ile style bloklarının içerikleri. Alıntılanmış öznitelik değerleri ve pre ile textarea öğelerinin gövdeleri tek birim olarak ele alınır; bu nedenle bunların içindeki boşluklar dokunulmadan bırakılır.
- İç içe geçmeyi izleme. Belirteç akışını dolaşırken güzelleştirici çalışan bir girinti düzeyi tutar. Kendi kendini kapatan olmayan her açılış etiketi düzeyi bir adım derinleştirir; her eşleşen kapanış etiketi onu geri alır. Bu derinlik, geri aldığınız her satırın önünde kaç girinti birimi olacağına karar verir.
- Seçenekleri uygulama. Girinti seçiminiz (2 boşluk, 4 boşluk veya sekme) bir düzeyin genişliğini belirler. Sütunda kaydır değeri, özniteliklerin veya metnin uzun satırlarını seçtiğiniz sütunu geçtiklerinde kırar. Boş satır sınırı, uzun boş satır dizilerini seçtiğiniz limite kadar daraltır.
- Markup'ı yeniden yayma. Son olarak biçimlendirici etiketleri hesapladığı girinti ve satır sonlarıyla geri yazdırır. Inline biçimlendirme açıksa her style bloğunun içeriği CSS biçimlendiriciden, her script bloğununkiyse JS biçimlendiriciden geçer; böylece gömülü kod çevresindeki markup ile hizalanır.
HTML neden güzelleştirilir
- Küçültülmüş sayfaları okuma. Prodüksiyon HTML, bayt kazanmak için satır sonları çıkarılarak gönderilir. Güzelleştirme yapıyı geri yükler; böylece aradığınız bölümü bulabilir, eksik bir kapanış etiketini fark edebilir ve belgenin gerçekte nasıl iç içe olduğunu izleyebilirsiniz.
- Tutarsız şablonları düzenleme. Birden fazla kişinin düzenlediği markup, karışık girinti ve etiket yerleşimine sürüklenir. Güzelleştirici üzerinden tek bir geçiş tüm dosyayı normalleştirir; bir sonraki commit, yeniden biçimlendirilmiş boşluklar yerine yaptığınız değişikliği gösterir.
- Bu araç sayfanıza vergi yüklemez. Çoğu çevrimiçi biçimlendirici, sayfayı açar açmaz tüm kütüphanesini yükler. Bu araç js-beautify'ı yalnızca Güzelleştir'e tıkladığınızda veya Canlı modu açtığınızda geç yükler; sayfayı açmak birkaç yüz yerine birkaç kilobayta mal olur ve sayfa hızlı kalır.
- Hiçbir şey tarayıcınızı terk etmez. Her şey cihazınızda çalışır. Markup'ınız hiçbir zaman bir sunucuya yüklenmez; bu, sayfa bir müşteriye ait olduğunda, dahili URL'ler içerdiğinde veya imzaladığınız bir gizlilik sözleşmesi kapsamında olduğunda önem taşır.
Yaygın uygulamalar
HTML güzelleştirme, birinin okunmak için yazılmamış markup'ı okuması gerektiğinde ortaya çıkar.
- Canlı sayfa inceleme: yerel olarak yeniden üretemediğiniz bir düzen hatasının arkasındaki markup'ı bulmak için View Source'dan alınan küçültülmüş kaynağı yapıştırın.
- CMS çıktısını temizleme: bir sayfa oluşturucunun tek satırda dışa aktardığı şablonu repoya geri göndermeden önce yeniden biçimlendirin.
- Erişilebilirlik ve SEO incelemeleri: gerçek DOM'a karşı başlık sıralamasını, landmark yapısını ve alt özniteliklerini kontrol etmek için belgeyi genişletin.
Uygulamalı bir örnek
Küçültülmüş bir snippet alın: <div><p>hi</p><span>x</span></div>. Girinti 2 boşluk olarak ayarlanmışken yukarıya yapıştırın, ardından Güzelleştir'e tıklayın. Okunabilir bir blok geri alırsınız: <div> kendi satırında, <p>hi</p> ve <span>x</span> her biri bir düzey girintili ve eşleşen </div> altında hizalı. Girintiyi Sekmelere geçirin; her düzey iki boşluktan bir sekme karakterine geçer. Bir <style>a{color:red}</style> bloğu ekleyip "Inline CSS ve JS'yi de biçimlendir"i açın; kural bir satırda kalmak yerine kendi girintili satırlarına genişler.
FAQ
Bu tarayıcımda mı çalışıyor?
Evet. js-beautify kütüphanesi, Güzelleştir'e ilk tıkladığınızda veya Canlı modu etkinleştirdiğinizde geç yüklenir, ardından önbelleğe alınır. Markup'ınız hiçbir zaman sayfayı terk etmez — sunucu ile gidiş-dönüş veya yükleme yoktur.
Güzelleştirme sayfamın nasıl oluşturulacağını değiştirir mi?
Hayır. Güzelleştirici yalnızca etiketler arasındaki boşlukları ve satır sonlarını ekler ve kaldırır. Tarayıcı sayfayı oluştururken bu boşlukları yok sayar; dolayısıyla oluşturulan sonuç aynıdır. Dikkat edilmesi gereken tek şey, biçimlendiricinin kasıtlı olarak dokunmadan bıraktığı pre, textarea veya inline öğelerdeki boşluğa duyarlı içeriktir.
Inline CSS ve JS geçişi ne yapar?
Kapalıyken style ve script bloklarının içeriği tam olarak yapıştırıldığı gibi bırakılır. Açıkken her style bloğunun içindeki CSS, CSS biçimlendiriciden; her script bloğunun içindeki JavaScript ise JS biçimlendiriciden geçer; böylece gömülü kod çevresindeki markup ile hizalanacak şekilde girintilenir.
"Sütunda kaydır" ne yapar?
Çok sayıda özniteliğe sahip bir etiketin ya da uzun bir metin dizisinin birden fazla satıra bölündüğü satır uzunluğunu belirler. Uzunluğuna bakılmaksızın her öğeyi tek satırda tutmak için 0 bırakın. 80 veya 120 yapın; biçimlendirici o sütunu aşan her şeyi kaydırır; bu da geniş öğeleri dar bir düzenleyicide okunabilir kılar.
Tarayıcı taraflı HTML güzelleştirme, bir derleme adımı veya yükleme olmadan okunabilir markup sağlar. Küçültülmüş veya dağınık bir sayfayı yapıştırın, girinti ve kaydırma genişliğini seçin, inline CSS ve JS'yi yeniden biçimlendirip biçimlendirmeyeceğinize karar verin, ardından sonucu kopyalayın veya indirin. Hiçbir şey cihazınızı terk etmez, hesap yoktur ve kütüphane yalnızca bunu istediğinizde yüklenir — bu nedenle bu sayfayı açmak size bir megabayт değil birkaç kilobayt mal olur.