Kod dünyası, bir dilin büyülü ritmini takip ederken sıklıkla karmaşık bir labirente dönüşebilir. Geliştiriciler, sayısız satır kodu incelerken, her parantezin, her fonksiyonun ve her değişkenin arasından geçerken bazen göz yorulabilirler. Ancak endişelenmeye gerek yok, çünkü bu yazıda size rehberlik edecek sihirli bir araçla tanıştıracağız. JavaScript’in renkli dünyası, kod parçacıklarınızı sanki bir ressamın paletinden fışkıran renklerle donatmanıza yardımcı olabilir. Bu yazıda, kod editörlerinin ve IDE’lerin içindeki bu gizli sanatı nasıl kullanabileceğinizi keşfedeceksiniz.
Bir süredir paylaştığımız kodları renklendirmek için bir kütüphane arayışı içerisindeydik. Paylaşılan kodların renklendirilmesi, geliştiriciler veya programlamaya yeni başlayan junior’lar için oldukça önemlidir. Çünkü semantik olarak kodu başlangıçta okuyabilmek, kod geliştirmede son derece önemlidir. Eğer renklendirilmiş kod satırlarınız yoksa, bu, okumayı oldukça güçleştirir ve kullanıcının veya geliştiricinin kodunuzla ilgilenmemesine yol açabilir.
Bunun önüne geçebilmek amacıyla, yaptığımız araştırmalarda highlight.js adında bir kütüphane keşfettik. Bu kütüphane, 192 programlama dilini destekliyor ve 258 adet farklı renklendirme modeli sağlıyor. Şimdi, bu kod satırlarını renklendirmeye yarayan kütüphaneyi bir web sitesinde nasıl sorunsuz bir şekilde uygulayabileceğimize bakacağız.
IDE nedir?
IDE, “Integrated Development Environment” (Entegre Geliştirme Ortamı) kısaltmasıyla bilinen bir terimdir. Bir IDE, bir geliştiricinin yazılım geliştirme sürecini kolaylaştırmak için bir araya getirilmiş bir dizi araç ve özelliklerden oluşan bir yazılımdır. Bu araçlar, kod yazımından test etmeye, hata ayıklamadan derlemeye kadar birçok farklı aşamayı desteklemek için tasarlanmıştır.
IDE’ler, geliştiricilere aşağıdaki gibi faydalı özellikler sunabilir:
- Kod Editörü: Kodunuzu yazmanıza, düzenlemenize ve biçimlendirmenize yardımcı olur.
- Otomatik Tamamlama: Değişken, fonksiyon veya sınıf adlarını yazarken otomatik olarak öneriler sunar.
- Hata Ayıklama Araçları: Kodunuzdaki hataları bulmanızı ve çözmenizi kolaylaştırır.
- Entegrasyonlar: Farklı dil destekleri, eklentiler ve entegrasyonlar aracılığıyla geliştirme sürecinizi genişletebilir.
- Derleme ve Yürütme: Kodunuzu derleyebilir ve çalıştırabilirsiniz.
- Versiyon Kontrol Entegrasyonu: Kodunuzu takip etmek ve yönetmek için versiyon kontrol sistemleriyle entegrasyon sunar.
- Belgeleme Yardımı: Kodunuzun belgelenmesine yardımcı olur.
- Kod Analizi: Potansiyel hataları veya iyileştirmeleri bulmanız için kodunuzu analiz edebilir.
- Arayüz Tasarımı: GUI (Graphical User Interface) uygulamaları geliştirirken arayüz tasarımını kolaylaştırabilir.
- Performans İzleme: Kodunuzun performansını izlemeye yardımcı olabilir.
Genel olarak, IDE’ler geliştirme sürecini daha verimli ve kolay hale getirmek için gerekli araçları tek bir platformda bir araya getirir. Bu nedenle, birçok geliştirici için vazgeçilmez bir araçtır.
Kod renklendirmesi, bir IDE’nin sadece bir özelliğidir. Kod renklendirmesi, kod yazılırken farklı öğelerin (değişkenler, fonksiyonlar, anahtar kelimeler vb.) farklı renklerle vurgulanmasıdır. Bu, kodun daha okunabilir olmasını sağlar ve kodun farklı bileşenlerinin görsel olarak ayırt edilmesini kolaylaştırır.
Biz ise, IDE’nin bir özelliğini, yani kodların renklendirilmesini sağlamaya çalışacağız.
Yaklaşım
Kodları paylaşmak için HTML’de yaygın olarak <code> ögesi kullanılır. Ancak Gutenberg benzeri bazı editörler, <code> öğesini <pre> öğesinin hemen altına yerleştiriyor. Ayrıca <code> ögesini kullandığınızda ve sayfayı her yenilediğinizde, bağımsız bir ID atandığı, daha doğrusu ID’nin sürekli değiştiği görülüyor. Burada yalnızca <pre> öğesine sınıf atamak gibi sorunla karşı karşıyayız. Ancak biz <code> ögesine sınıf atamak istiyoruz. Çünkü kullandığımız kütüphane, bize, <code> elementine bir sınıf atamamız gerektiğini telkin ediyor. Örneğin:
<code class="language-html">Bu sorunu aşmak için Gutenberg editörde <HTML> bloğu kullandık ve <code> öğesine istediğimiz sınıfı atadık.
Daha sonra kütüphaneleri kullanabilmek için <head> kısmına şu satırları yerleştiriyoruz.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>Ayrıca <body> etiketinin sonunda highlight.js kütüphanesini başlatmak için bir <script> etiketini eklememiz gerekiyor.
Bu işlemleri tamamladıktan sonra paylacağınız kodu şu şekilde biçimlendirmeniz gerekiyor:
Merhaba Dünya!
