Highlight.js, web uygulamalarında kaynak kodunun biçimlendirilip renklendirilmesi için popüler bir JavaScript kütüphanesidir. Bu kütüphane, birçok farklı programlama dilini destekler ve kullanıcıya web sayfalarında kodu daha okunabilir hale getirme olanağı sunar. Bu yazıda, Highlight.js’in temel kullanımını ve kodlarımızı nasıl renklendirip biçimlendireceğimizi göreceğiz.
Otomatik kod biçimlendirme ve renklendirme neden bu kadar önemli?
Kod yazmak, bir programcı için yalnızca fonksiyonel bir ihtiyaç değil, aynı zamanda bir sanattır. Ancak, kodun estetik ve anlaşılırlığı, genellikle göz ardı edilen bir yönüdür. İşte otomatik kod biçimlendirme ve renklendirmenin önemini vurgulayan bazı sebepler:
- Okunabilirlik: Otomatik renklendirme, farklı kod bileşenlerini ayırt etmeyi kolaylaştırır. Fonksiyonlar, değişkenler, anahtar kelimeler vb. farklı renklerle vurgulanarak, gözün hızla ayırt edebilmesine yardımcı olur. Bu, özellikle karmaşık kod yapılarında hızlı bir şekilde oryantasyon sağlar.
- Hızlı Hata Tespiti: Renklendirme, özellikle kodun hatalı veya eksik olduğunda dikkat çekici olabilir. Örneğin; bir string’in ya da yorum satırının kapatılmamış olması durumunda bu, renkler sayesinde kolayca fark edilebilir.
- Kod Standartlarına Uyumluluk: Otomatik biçimlendirme, kodun belirli bir standartta yazılmasını sağlar. Bu, ekip içinde çalışırken bütünlüğün korunmasına yardımcı olur.
- Zaman Tasarrufu: Kodun manuel olarak biçimlendirilmesi zaman alıcı bir işlemdir. Otomatik biçimlendirme, bu süreci hızlandırarak geliştiricinin asıl işlevsellikle ilgilenmesine olanak tanır.
- Eğitim ve Öğrenme: Başlangıç seviyesindeki geliştiriciler için renkli ve düzenli kod, öğrenme sürecini destekler. Öğrenciler veya yeni başlayanlar, renklendirilmiş kodun farklı bileşenlerini daha kolay anlayabilirler.
- Profesyonellik: Blog yazıları, dokümantasyonlar ya da sunumlar için kod gömme ihtiyacı olduğunda, renklendirilmiş ve düzenli kod, profesyonelliği yansıtır. Okuyucunun dikkatini çeker ve içeriğin daha etkili bir şekilde sunulmasına yardımcı olur.
Sonuç olarak, otomatik kod biçimlendirme ve renklendirmenin avantajları, kodun sadece işlevselliğini değil, aynı zamanda sunumunu ve etkileşimini de optimize eder. Bu nedenle, modern web geliştirme ve programlama pratiklerinde bu tür araçların kullanımı giderek daha yaygın hale gelmektedir. Highlight.js gibi kütüphaneler, bu ihtiyaçları karşılamak için mükemmel çözümler sunar.
Kütüphaneyi Dahil Etme
Öncelikle, Highlight.js kütüphanesini web sayfamıza dahil etmeliyiz. Bunun için aşağıdaki iki satırı HTML dosyanızın <head> bölümüne ekleyin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>Bu satırlar, Highlight.js’in stil ve işlevsellik dosyalarını projemize ekler.
Kodun Biçimlendirilmesi
Verdiğiniz kod parçası, her bir kod satırının başına satır numarası ekleyen bir işlem gerçekleştiriyor. Bu işlem şu adımlardan oluşuyor:
- HTML içindeki
<pre>elementi seçilir. - Bu
<pre>elementi içindeki tüm<code>elementleri seçilir. - Her bir
<code>elementi içerisindeki kod satırlarına sırasıyla numara eklenir. - Numaralandırılmış satırlar,
<code>elementine geri yazılır.
Kod Renklendirmesi
Highlight.js’in renklendirme işlevini başlatmak için aşağıdaki satırı kullanıyoruz:
hljs.initHighlightingOnLoad();Bu fonksiyon, sayfa yüklendiğinde otomatik olarak çalışır ve tüm kod parçalarını renklendirir.
<!-- Highlight.js kütüphanesi -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>
// <pre> elementini seç
var pre = document.querySelector("pre");
// <pre> elementinin içindeki tüm <code> elementlerini seç
var codes = pre.querySelectorAll("code");
// Her bir <code> elementi için
for (var i = 0; i < codes.length; i++) {
// <code> elementinin içindeki HTML'i al
var code = codes[i].innerHTML;
// Yeni satır karakterleri ile böl
var lines = code.split("\n");
// Her bir dizeye sayı ekle
for (var j = 0; j < lines.length; j++) {
lines[j] = (j + 1) + ". " + lines[j];
}
// Dizeleri yeniden birleştir
code = lines.join("\n");
// <code> elementinin içeriğini güncelle
codes[i].innerHTML = code;
}
// Kod renklendirmesini etkinleştir
hljs.initHighlightingOnLoad();
// <pre> elementinin HTML’i olarak ayarla (bu satır döngünün dışında olmalı)
pre.innerHTML = pre.innerHTML;Bu kod parçası, Highlight.js kütüphanesini kullanarak web sayfasında kod biçimlendirmesi ve renklendirmesi yapmayı hedefliyor. İşte kodun adım adım açıklaması:
- Highlight.js Kütüphanesinin Dahil Edilmesi:
- İlk olarak, Highlight.js kütüphanesine ait stil dosyası (CSS) ve işlevsellik dosyası (JavaScript) web sayfasına dahil ediliyor.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script> - Element Seçimi:
- Sayfadan ilk
<pre>elementi seçilir. Bu, genellikle kod bloklarını içermek için kullanılır.
var pre = document.querySelector("pre");- Daha sonra bu
<pre>elementi içerisindeki tüm<code>elementleri seçilir. Bu elementler genellikle kod parçalarını içerir.
var codes = pre.querySelectorAll("code"); - Sayfadan ilk
- Satır Numaralandırması:
- Her bir
<code>elementi için bir döngü başlatılır. - İlgili
<code>elementinin içerdiği HTML kodu alınır ve her satır yeni satır karakterleri (\n) ile ayrılır. - Her bir satıra sırasıyla bir sayı eklenir. Bu, satır numaralandırması için yapılır.
- Sayılandırılmış satırlar yeniden birleştirilir ve bu bilgi
<code>elementine geri yazılır.
- Her bir
- Kod Renklendirmesi:
- Highlight.js’in otomatik kod renklendirme fonksiyonu, sayfa yüklendiğinde çalıştırılır. Böylece kod parçaları renklendirilir.
hljs.initHighlightingOnLoad(); - Elementini Güncelleme:
- Son olarak,
<pre>elementinin içeriği güncellenir. Bu, satır numaralandırmasının düzgün çalışabilmesi için gereklidir.javascript pre.innerHTML = pre.innerHTML;
- Son olarak,
Bu kod parçası, kodun renklendirilmesinin yanı sıra satır numaralandırması gibi ek bir özellik sunar. Bu, özellikle uzun kod bloklarında hangi satırda hangi kodun olduğunu görmeyi kolaylaştırır ve kodun daha okunabilir olmasını sağlar.
Sonuç
Yukarıdaki kodlar sayesinde, web sayfanızda yer alan kod parçaları hem renklendirilmiş hem de satır numaralarıyla biçimlendirilmiş olacaktır. Highlight.js, web geliştiricileri için kaynak kodunun anlaşılırlığını artırmada büyük bir yardımcıdır. Siz de bu kütüphaneyi kullanarak kodlarınızı daha estetik ve okunabilir hale getirebilirsiniz.
