Highlight.js ile WordPress bloglarda paylaşılan kodları otomatik renklendirme işlemi

WordPress blogunuzda teknik içerikler paylaşıyorsanız, okuyucularınızın dikkatini çekmek ve onlara daha iyi bir okuma deneyimi sunmak için kod snippet’lerinin görsel olarak çekici hale getirilmesi büyük önem taşır. Renkli syntax highlight (sözdizimi vurgulama) ve satır numaralandırması, kodu daha okunabilir ve anlaşılır kılarak, okuyucularınızın kodu daha rahat takip etmelerini ve anlamalarını sağlar.

Bu yazıda, WordPress içeriklerinizde kod snippet’lerini otomatik olarak renklendirmenin ve numaralandırmanın nasıl yapılabileceğini adım adım anlatacağım. Kullanacağımız yöntem, herhangi bir ek eklentiye ihtiyaç duymadan, basitçe birkaç CSS ve JavaScript kod satırı ekleyerek gerçekleştirilecek. Bu yöntem, özellikle teknik blog yazarları için mükemmel bir çözümdür, çünkü kodun okunabilirliğini artırırken aynı zamanda sayfa yükleme hızını olumsuz etkilemez.

Öncelikle, Highlight.js kütüphanesinden yararlanacağız. Highlight.js, web sayfalarında syntax highlight işlemi yapmak için kullanılan hafif ve kullanımı kolay bir JavaScript kütüphanesidir. Bu kütüphane, çok sayıda programlama dili ve stil desteği sunar, böylece kod snippet’leriniz her zaman profesyonel ve temiz görünür.

Sonrasında, kodunuzu daha da özelleştirmek için kendi CSS stilimizi tanımlayacağız. Bu stille, kod bloklarının çevresine zarif bir çerçeve ekleyecek, satır numaralarını belirginleştirecek ve kodu kopyalamak için kullanışlı bir buton sağlayacağız. Bu özellikler, okuyucularınızın dikkatini çekmek ve onlara kod üzerinde daha fazla kontrol sağlamak için harikadır.

Eğer siz de blog yazılarınızda kod snippet’lerini daha etkileyici ve anlaşılır hale getirmek istiyorsanız, bu rehber tam size göre. Adımları takip ederek, okuyucularınıza unutulmaz bir okuma deneyimi sunabilir ve teknik içeriklerinizi bir adım öne çıkarabilirsiniz.

Giriş ve Yaklaşım

WordPress’te teknik blog yazarları kodlarını paylaşırken, eğer klasik metin editörü yerine Gutenberg kullanıyorlarsa “Kod” bloğunu kullanabilirler. Bu blok içerisine yerleştirilen kod snippet’leri varsayılan olarak “wp-block-code” sınıfına sahiptir. Ancak paylaşılan bu kodlar, HTML sayfa oluşturulduktan sonra formatlanmış bir şekilde görünmez. Bu durum, okuyucular açısından bir handikap oluşturarak kötü bir deneyim sunmaktadır.

Okuyucuların söz dizimlerini daha rahat kavraması için paylaşılan kodların renklendirilmesi oldukça önemlidir. Bu durumda WordPress’te varsayılan olarak mevcut olmayan bu özelliği Mudos Digital tarafından oluşturulan CSS ve JavaScript kodlarıyla internet sitemize kazandırabiliriz.

Bu özelliği kazandırmak ve kodları otomatik olarak renklendirmek için Highlight.js adında popüler bir JavaScript kütüphanesi kullanacağız. Yine numaralandırma işlemi için birkaç satır paylaşacağız. Ayrıca CSS ile görsel iyileştirmeler yapacağız.

Highlight.js, paylaştığımız kodların içeriğini algılama kapasitesine sahiptir. Dolayısıyla ister HTML, ister CSS, ister JavaScript, isterseniz de Python kodları paylaşın, bu kütüphane paylaştığınız kodun hangi programlama dilinde yazıldığını otomatik olarak algılayacak ve ona göre renklendirme işlemi yapacaktır.

Ayrıca paylaştığımız kodlarda kullanıcı deneyimini artırmak için bir adet “Kopyala” düğmesi yerleştireceğiz. Bu düğme, kullanıcıların kod snippet’ini kopyalamasını sağlayacak. Düğmeye tıklandığında kopyalama işleminin gerçekleştiğini göstermek için düğme metnini “Kopyalandı” olarak değiştireceğiz.

Adım 1: Highlight.js ve CSS Stillerini Entegre Etme

İlk olarak, Highlight.js kütüphanesini ve kendi özel CSS stillerimizi blogunuza entegre edeceğiz. Bu, kod snippet’lerinizin otomatik olarak renklendirilmesini ve estetik bir şekilde gösterilmesini sağlayacak.

• WordPress Yerel Geliştirme Ortamı – Docker ile Adım Adım Rehber
• Looker Studio ile Tekil Sayfa Performans Grafiği Oluşturma
• SEO’da Anahtar Kelime Vektörleri ve Semantik Aramadaki Rolü
• Tıklama Oranı (TO) Nedir? Anahtar Kelime TO Artırma Yolları
• Googlebot Rehberi: Nedir, Nasıl Çalışır ve Sitenizi Nasıl Etkiler?

1. Highlight.js Kütüphanesini Ekleyin

<!-- Highlight.js ve ek stiller -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css">

Bu linki, WordPress sitenizin <head> bölümüne ekleyin. Bu işlemi, WordPress yönetici panelinizden Görünüm > Tema Düzenleyici > header.php dosyasını düzenleyerek yapabilirsiniz.

2. Özel CSS Stillerini Tanımlayın

Aşağıdaki CSS kodunu, sitenizin <head> bölümüne veya tercih ettiğiniz bir CSS dosyasına ekleyin:

<style>
/* Konteyner stilini tanımla */
.code-container {
  display: flex;
  align-items: flex-start;
}

/* Satır numaralarını içeren sütun için stil */
.line-numbers {
  text-align: right;
  user-select: none;
  color: #aaa;
  padding-right: 10px;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
}

/* Kod bloğu için stil */
.code-block {
  white-space: pre-wrap;
  width: 100%;
  line-height: 1.5;
}

/* Kopyalama butonu stili */
.mudos-code-copier {
  cursor: pointer;
  margin-bottom: 10px;
}
</style>

Bu stiller, kod bloklarınızın daha düzenli ve okunabilir olmasını sağlar.

Adım 2: JavaScript Kodunu Ekleyin

Aşağıdaki JavaScript kodunu, sitenizin <body> etiketinin sonuna veya bir JS dosyasına ekleyin:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.wp-block-code').forEach(block => {
    const codeBlock = block.querySelector('code');
    const lines = codeBlock.textContent.split('\n');

    // Kopyalama butonunu oluştur
    const button = document.createElement('button');
    button.className = 'mudos-code-copier';
    button.textContent = 'Kopyala';
    button.onclick = function() {
      navigator.clipboard.writeText(codeBlock.textContent).then(() => {
        button.textContent = 'Kopyalandı!';
        setTimeout(() => {
          button.textContent = 'Kopyala';
        }, 2000);
      }).catch(err => {
        console.error('Kopyalama işlemi başarısız:', err);
      });
    };

    block.insertBefore(button, codeBlock);

    const lineNumbersContainer = document.createElement('div');
    lineNumbersContainer.className = 'line-numbers';

    for (let i = 1; i <= lines.length; i++) {
      lineNumbersContainer.innerHTML += `${i}<br>`;
    }

    const codeContainer = document.createElement('div');
    codeContainer.className = 'code-container';

    block.insertBefore(codeContainer, codeBlock);
    codeContainer.appendChild(lineNumbersContainer);

    const newCodeBlock = document.createElement('code');
    newCodeBlock.className = codeBlock.className;
    newCodeBlock.textContent = codeBlock.textContent;
    hljs.highlightBlock(newCodeBlock);

    const codeBlockWrapper = document.createElement('div');
    codeBlockWrapper.className = 'code-block';
    codeBlockWrapper.appendChild(newCodeBlock);

    codeContainer.appendChild(codeBlockWrapper);

    block.removeChild(codeBlock);
  });
});
</script>

Bu JavaScript kodu, her bir kod bloğunu alır, satır numaralarını ekler, syntax’ı renklendirir ve kopyalama butonu ekler. Bu, kullanıcı deneyimini önemli ölçüde artırır.

Sonuç

Yukarıdaki adımları takip ederek, WordPress blogunuzdaki kod snippet’lerini estetik ve fonksiyonel bir hale getirebilirsiniz. Bu yöntem, teknik blog yazarları için mükemmeldir, çünkü okuyucuların kodu daha rahat anlamalarını ve etkileşimde bulunmalarını sağlar. Ayrıca, sitenizin genel tasarımıyla uyumlu, profesyonel görünümlü kod blokları oluşturmanıza olanak tanır.

Bu yönergeleri uygulayarak, okuyucularınıza değerli ve anlaşılır içerikler sunabilir, blogunuzun teknik otoritesini ve okunabilirliğini artırabilirsiniz.