WordPress sitenizde kod paylaşmak için Prismatic eklentisini ve onun güçlü motoru Prism.js‘i kullanıyorsanız, bazen her şeyin doğru görünmesine rağmen satır numaralarının çıkmaması can sıkıcı bir sorun haline gelebilir. Ayarları yapmanıza rağmen kod bloklarınızın yanında numaraları göremiyorsanız, muhtemelen çok küçük bir teknik detay eksik kalıyordur.

Bu rehberde, bu sorunun neden kaynaklandığını ve sadece birkaç saniyede nasıl kökten çözeceğinizi adım adım anlatıyoruz.

1. Adım: İlk Kontrol – Eklenti Ayarları

Sorunu çözmeye başlamadan önce, eklentinin kendi içinde bu özelliği aktif edip etmediğinizden emin olmalısınız.

  1. WordPress panelinizden Settings (Ayarlar) > Prismatic yolunu izleyin.

  2. Üst menüden Prism.js sekmesine tıklayın.

  3. Sayfayı aşağı kaydırarak Line Numbers seçeneğini bulun ve kutucuğun işaretli olduğundan emin olun.

Eğer burası işaretli olduğu halde numaralar hala görünmüyorsa, sorun temanızdaki bir çakışmadan kaynaklanıyor demektir.

2. Adım: Sorunun Kaynağını Anlamak (HTML Kontrolü)

Prism.js kütüphanesinin satır numaralarını oluşturabilmesi için kodun etrafındaki çerçeveye (etikete) özel bir “komut” vermesi gerekir. Bu komut, HTML kodunuzdaki bir sınıf (class) adıdır.

Normal şartlarda eklenti, kod bloklarınızın başına şu etiketi eklemelidir: <pre class="line-numbers">

Ancak kullandığınız WordPress teması veya başka bir eklenti, Prismatic ile çakışarak bu line-numbers yazısının otomatik olarak eklenmesini engelleyebilir. Bu yazı olmayınca da tarayıcı, satır numaralarını göstermesi gerektiğini anlamaz.

3. Adım: Kesin Çözüm – Otomatikleştirme (JavaScript)

Her seferinde kod bloklarınıza elle müdahale etmek yerine, sitenize ekleyeceğiniz minik bir yardımcı kod ile bu sorunu kökten çözebilirsiniz. Bu kod, sayfanızdaki tüm kod bloklarını bulur ve eksik olan “satır numarası göster” komutunu (class) onlara otomatik olarak fısıldar.

Uygulanacak Kod:

Aşağıdaki JavaScript kodunu kopyalayın:

<script> 
document.querySelectorAll('pre').forEach(function(block) { block.classList.add('line-numbers'); }); 
</script>

Bu Kodu Nereye Eklemelisiniz?

Bu kodun çalışması için sitenizin en alt kısmına (footer) eklenmesi gerekir. Bunun için iki yolunuz var:

  • Tema Düzenleyici İle: Görünüm > Tema Dosya Düzenleyicisi kısmından footer.php dosyasını açın ve </body> etiketinden hemen önce kodu yapıştırın.

  • Eklenti İle (Daha Güvenli): “Insert Headers and Footers” gibi bir eklenti kullanarak “Scripts in Footer” kısmına bu kodu ekleyebilirsiniz.

Sonuç

Bu işlemi yaptıktan sonra sitenizi yenilediğinizde (ve varsa önbelleği/cache temizlediğinizde), tüm kod bloklarınızın sol tarafında düzenli bir şekilde satır numaralarının belirdiğini göreceksiniz. Artık paylaştığınız kodlar hem daha derli toplu hem de çok daha profesyonel görünecek!

Küçük Bir Not: Eğer bu işlemden sonra numaralar görünüyor ama kodların üstüne biniyorsa, eklenti ayarlarından farklı bir “Theme” (Görünüm Teması) seçmeyi deneyebilirsiniz. Bazı temalar satır numaralarıyla daha uyumlu çalışmaktadır.