İçeriğe geç
Muslu Yüksektepe

html_css_js_beautifier

Sıkıştırılmış ya da düzensiz HTML, CSS ve JavaScript kodlarını otomatik girintileyip okunur hâle getiren araç.

html_css_js_beautifier, sıkıştırılmış ya da tek satıra yazılmış HTML, CSS ve JavaScript kodlarını okunabilir biçimde girintilemek için 2016 yılında hazırladığım kısa bir Python örneği. Depoda tek bir dosya bulunuyor ve bu dosya işi html5print kütüphanesine bırakıyor.

Amaç

Küçültülmüş (minify edilmiş), yani boşlukları ve satır sonları silinerek tek satıra indirilmiş bir JavaScript ya da CSS dosyasını okumak neredeyse imkânsız. Bu örneği, üç dili de aynı kütüphaneyle düzgün girintili hâle getirmenin en kısa yolunu not etmek için yazdım. Aynı gün yazdığım SQL, XML ve JSON girintileme örnekleriyle birlikte küçük bir dizinin parçası.

Nasıl çalışır

Betik, html5print kütüphanesinden HTMLBeautifier, CSSBeautifier ve JSBeautifier sınıflarını içe aktarıyor. Her biri için örnek bir girdi tanımlanmış durumda. Bir JavaScript satırı, tek satırlık bir CSS kuralı ve yarım bir HTML parçası. Örnekte JSBeautifier.beautify fonksiyonu JavaScript koduyla ve dört boşluklu girinti değeriyle çağrılıyor, sonuç ekrana yazılıyor. Aynı çağrı CSS ve HTML sınıfları için de aynı şekilde kullanılabiliyor.

Öne çıkan özellikler

  • Üç farklı dil için aynı kütüphanenin üç sınıfını bir arada gösteriyor.
  • Girinti genişliği fonksiyona parametre olarak veriliyor.

Teknik altyapı

Kod Python ile yazıldı ve tek dış bağımlılığı html5print kütüphanesi. Bir modül ya da paket olarak değil, kopyalanıp uyarlanacak bir başlangıç örneği olarak duruyor.

Durum

Bu bir not niteliğinde örnek; 2016'dan bu yana güncellenmedi. Örnekteki JavaScript satırında tırnak işaretleri iç içe kullanıldığı için betik bu hâliyle çalıştırılırsa sözdizimi hatası veriyor. Kendi girdinizle kullanırken bu satırı düzeltmek gerekiyor.

Kullanım alanları

  • Küçültülmüş bir CSS ya da JavaScript dosyasını incelemeden önce okunur hâle getirmek için kullanılabilir.
  • Başka bir Python aracına HTML, CSS ve JavaScript girintileme eklerken başlangıç noktası olabilir.
Kategori
Geliştirici araçları
Yıl
2016

Teknolojiler

  • Python
  • HTML
  • CSS
  • JavaScript

Bağlantılar

  • GitHub https://github.com/muslu/html_css_js_beautifier

Tüm projelere dön