Genel Makaleler

Highlight.js ile Kod Renklendirme

Web sitelerinde yer alan kod paylaşımlarının, daha düzenli durması ve temayla bütünlük kazanması için bir takım kod renklendirici eklendiler kullanılmaktadır. Bunlardan en popüler olanı ve benimde her daim tercih ettiğim eklenti de, Highlight.js dir. Bu makalede Highlight eklentisinin nasıl kullanılması hakkında bilgiler vermeye çalışacağım.

Temel Olarak Highlight.js Eklentisinin Özellikleri Şu Şekildedir;

  • 135 dilde renklendirme yapmaktadır.
  • 65 tane farklı renklendirme stillerine sahiptir.
  • Otomatik olarak dili algılayıp, renklendirme yapmaktadır.
  • Bütün frameworkler de çalışmaktadır.
  • Aynı kod bloğunda ki farklı dilleri algılayıp renklendirmektedir.
  • Highlight Eklentisinin Kullanımı

Highlight eklentisiyle Kod renklendirme işlemi yapabilmek için, highlightjs.org adresini ziyaret edip gerekli dosyaları indiriyoruz. İndirmiş olduğumuz rar dosyasının içerisinde yer alan highlight.pack.js renklendirmeyi yapacak js dosyamızdır. Styles klasöründe yer alan css dosyalarında da renklendirme stilleri tanımlanmıştır.

<script src="highlight.pack.js"></script> // Kod renklendirme eklentisini sayfaya dahil ettik.
<link rel="stylesheet" href="styles/default.css"> // Renklendirme stilini seçtik.
<script>hljs.initHighlightingOnLoad();</script> // Kod renklendirmeyi aktif ettik.

Yukarıdaki tanımlamaları gerçekleştirerek sayfada kod renklendirmeyi aktifleştirmiş oluyoruz. Yapacağımız sıradaki işlem de, kod renklendirilmesinin yapılacağı bloğu seçmektir.

Renklendirme işleminin yapılmasını istediğimiz kod satırını aşağıdaki yapının içerisine yazıyoruz.

<pre>
   <code>
      // Renklendirmesi yapılacak kodlar burada yer alacak.
   </code>
</pre>

Yukarıdaki kod satırında yer alan yorum bölümünün bulunduğu alana, istediğiniz kod tanımlamalarını yapabilirsiniz. Yazacağınız kod dilini otomatik olarak algılanacağından dolayı başka bir tanımlama yapmanıza gerek duyulmamaktadır.

Aşağıdaki kod satırları sırasıyla pre ve code etiketleri arasına yazıldığında, görüntülenen renklendirmeye sahip olacaktır.

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

Kendi sitemde de Highlight eklentisini kullanmaktayım. Stil dosyası olarak da github renklendirmesini tercih ettim.

Bir önceki yazım olan İbrahimcevruk.com 4 Yaşında | Vay Maşallah başlıklı makalemi de okumanızı öneririm.

İlgilizi Çekecek Konular

Localde Çalışan Site, Sunucuda Neden Bozulur?

ibrahim Çevrük

Google Web Fonts ile Yeni Fontlar Kullanma

ibrahim Çevrük

CloudFlare Hakkında Detaylı Bilgiler | Bulut Teknolojisi

ibrahim Çevrük

Yorum Giriniz