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ğundaki farklı dilleri algılayıp renklendirmektedir.

Highlight Eklentisinin Kullanımı

Highlight eklentisiyle Kod renklendirme işlemi yapabilmek için,  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ı <pre><code> .. </code></pre> 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.
- 18.09.2015 / 18:02:57 17

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

9:02 Php Dersleri

Değişken Tanımlama ve Ekrana Yazdırma

Kategori: Php Dersleri | 02.05.2013
2:25 Php Dersleri

Php ile Yazıları Tersine Çevirme | strrev();

Kategori: Php Dersleri | 04.05.2013
Web Tasarımları

Gri Web Site Teması [Html - jQuery] | Sitenin Eski Teması

Kategori: Web Tasarımları | 11.06.2013
Genel Makaleler

Gri Site Teması Düzenlemesi ve 13 Yenilik

Kategori: Genel Makaleler | 06.07.2015
Php Dersleri

Yorum Listesi (5) # YorumYap

  • latif aktaş (19.09.2015 - 02:40:37)
    Hocam sonunda bu yazıyı bekliyodum yani :) ama şöyle bişey var host'da konu eklerken hep code > pre mi yapıcaz bunun bi kolayı yokmudur?

    Teşekkürler
  • ibrahim Çevrük (19.09.2015 - 16:51:23)
    @latif aktaş Renklendirme işleminin yapılacağı kod satırının algılanması ve kodlama doğrultusunda bir stile sahip olması için code pre tanımlamasını yapmak zorundayız maalesef.
  • Burhan Cansız (19.09.2015 - 20:30:22)
    Eline sağlık çok merak ettğim konulardan birisiydi bu konu sayende bi soru işareti daha silindi iyi çalışmalar.
  • fankydansky (20.09.2015 - 11:25:22)
    Hocam ALLAH rağzı olsun yazı çok işime yaradı kendi sitemde bunu kullanmaya başladım fakat sizden bir ders isteğinde bulunmak istiyorum. Kendi sitemde kullandım fakat html kodu eklediğim zaman sitede gözüküyor.sizin siteniz gibi yapmak istiyorum. Nasıl yapabilirim? kodlar gözüksün ama çalışmasın. Şimdiden sağolun hocam ALLAH rağzı olsun.
  • fatihv. (06.10.2015 - 15:08:35)
    Selamun Aleyküm,
    Bu güzel yazıdan dolayı teşekkür ederim. Sorum şu olacak. İlk olarak çok uğraşmama rağmen çözüm üretemediğim sizin yukarıdaki gibi pre code leri ekrana yazdıramıyorum. Yardımcı olursanız çok sevinirim.

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.