WordPress Kod Renklendirme / Syntax Highlight – CodePretty

Eklentisiz olarak WordPress kod renklendirme için Google Code-Pretty scripti ile programlama diline özel renk vurguları oluşturacağız.

WordPress Kod Renklendirme, program koduna özel vurgular yapmak için birçok WordPress eklentisi bulunmaktadır ancak ben mecbur kalmadığım müddetçe eklenti kullanmamayı tercih ettiğim için eklentisiz, WordPress Kod Renklendirme nasıl yapabileceğimi araştırmaya koyuldum. Sonunda, Google Code prettify kütüphanesini kullanmayı tercih ettim.
Bu makalede, bu kitaplığın WordPress’e nasıl uygulanacağı ve birkaç CSS hamlesi kullanılarak nasıl daha çok yönlü hale getirileceği gösterilecektir.

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Sizde yukarıdakine benzer şekilde yazılarınızın içeriğinde, kullanacağınız programlama kodlarını vurgulamak istiyorsanız doğru yerdesiniz.

Google tarafından desteklenen Code-Pretify kütüphanesi C tabanlı diller, JavaScript, HTML, CSS gibi syntax code ‘larda çok iyi iş çıkartıyor.  Daha fazla bilgi için Prettify GitHub sayfasına bakın.

Peki, WordPress Kod Renklendirme işlemi nasıl yapılır?

Öncelikle yazacağımız programlama dillerini tanıması ve kütüphaneyi desteklemesi için sitemizde tanımlama yapacağız. Ardından, sözdizimi kodumuzu HTML dostu olacak şekilde kodlamamız gerekecek ve sonunda kodu vurgulamak için etkinleştireceğiz. Bu adımları gerçekleştirdikten sonra Wordpress Kod Renklendirme işlemi hayal ettiğinizden bile daha güzel olacaktır garanti veriyorum.

1- Script Ekleme

Code-Prettify ktüphanesini sitemizin header bölümüne eklememiz gerekiyor. Bunun için en kolay yol;
Wordpress sitenize yönetici olarak giriş yapın. Sol menüden Görünüm > Düzenleyici ‘ye tıklayın. Sağ taraftaki ‘Tema Dosyaları’ bölümünden “Tema üst bölümü (header.php)” seçin. Karşınıza gelen kod ekranında şu kodu;

bulun ve bir satır üstüne aşağıda ki kodu ekleyin:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2- Sözdizimi Kodunu Kodlama

Sözdizimi kodu (syntax code) olarak ta bilinen programlama kodunda kullanacağınız bazı özel karakterler (<, > gibi)  kodunuzun görüntülenmesine engel olacaktır. Böyle bir problemle karşılaşmamak için sözdizimi kodunu kodlamak gerekiyor. Sözdizimi kodunu kopyalayın ve şu adrese giderek üstteki boş alana kodunuzu yapıştırın ve Encode tuşuna basın.
eklentisiz-kod-vurgulama-encode

Sayfanın aşağısına inin Encode Result alanında ki kodlanmış kodu kopyalayın. Artık bu kodu web sitenizde sözdizimi kodu olarak kullanabileceksiniz.
eklentisiz-kod-vurgulama-encode2

Önemli Not: Sözdizimi kodunu yukarıdaki yazımda bahsettiğim gibi kodunuz bazı özel karakterler (<, > gibi) içeriyorsa HTML Encode işlemi yapmanız gerekiyor. Yani HTML tabanlı kod kullanacaksanız muhakkak encode işlemi yapacaksınız.

3- Sözdizimi Kodu Vurgusunu Etkinleştirme

Kodlanmış sözdizimi kodunu kopyaladıktan sonra web yazınızda bu kodu vurgulu olarak etkinleştirmek için aşağıdaki hususu yapmanız gerekiyor.

  • Kodunuzun önüne <pre class="prettyprint"> kodunu ekleyin.

Örneğin sözdizimi kodumuz aşağıda ki kod olsun:

function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}

WordPress yazınızda yukarıdaki sözdizimi kodunu vurgulu olarak kullanmak istiyorsanız yazacağınız kod şu şekilde olmalı:

<pre class="prettyprint">
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</pre>

Bu söz dizimi kodunu normal kod olarak kullansaydık şu şekilde görünecekti:
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}

Şahsen ben bunu kullanmayı tercih etmiyorum. Görüntü olarak hiç estetik olmadığı gibi tab ve boşluklar otomatik olarak silindiği için karışık bir kod görüntüsüne de sebep oluyor.

Eklemek istediğiniz her yeni sözdizimi kodu için, 2. ve 3. adımları tekrarlayın.

Makelenin bundan sonra ki bölümü sözdizimi kodu vurgu temasıyla ve prettify özellikleri ilgili olacaktır.

Varsayılan Temayı Değiştirme

Code Prettify kütüphanesi için şuan toplam 5 adet tema mevcut. Bunlara şu adresten ulaşabilirsiniz.

Hangi temayı beğendiyseniz o temanın ismini scripte ?skin=TemaAdı kodunu eklemek gerekiyor.
Örneğin benim bu yazı için kullandığım Son-of-Obsidian teması için script kodunuzu şu şekilde değiştirmelisiniz:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sons-of-obsidian"></script>

Diğer 3. Parti Temaları Kullanmak

Google Code Prettify kütüphanesi için geliştiriciden başka kullanıcılar tarafından oluşturulmuş 3. parti temalar da bulunmaktadır.  Şu adresten ulaşabilirsiniz.

Bu 3. partilerden bir tema kullanmak istiyorsanız adımlar şu adımları uygulayın;

  • İstediğiniz renk temasını seçin ve küçültülmüş sürümü (.min.css) bilgisayarınıza indirin.
  • Bu .min.css dosyasını WordPress temanızın klasörünüze kopyalayın.
  • 1.adımda uyguladığımız Tema üst bölümü (header.php) ‘ne eklediğimiz <script src=“…/run_prettify.js”></script> kodunun hemen arkasına tıklayın ve ENTER tuşuna basın alt satıra beğendiğiniz temanın tanımlaması yapılacak.

Örneğin “github-v2.min.css” temasını beğendik ve uygulayacağız. 1. adımda eklediğimiz script ‘ten hemen sonra ENTER ‘a basarak alt satıra geçiyorum ve şu kodu ekliyorum:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() . "/github-v2.min.css" ?>" type="text/css" />

Satır Numaraları Ekleme

Çok sayıda satır içeren büyük bir sözdizimi kod bloğumuz olduğunda, satır numaralandırmayı açarak yazıyı daha okunabilir hale getirebiliriz.

Google Prettify ile, bu, <pre> etiketine linenums kodu eklenerek yapılır:

<pre class="prettyprint linenums">

Varsayılan olarak yalnızca her 5. satır için satır sayısını gösterilir. Bu nedenle, her satırın satır numaralarını göstermek için temanızın style.css içine aşağıdaki CSS kodunu eklememiz gerekir:

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
  list-style-type: decimal;

Kodunuzun sol tarafındaki sayıların rengini değiştirmek için yine temanızın style.css dosyasına şu kodu ekleyin; ol.linenums{color: #AEAEAE;} Bu kod sayıları grinin bir tonu renginde gösterir.

Satır Arkaplan Renklerini Değiştirme

Sözdizimi kodunun görüntülendiği arkaplan rengini değiştirmek için şu kodu kullanabilirsiniz:

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    background: #f7f7f7;
}

ve satırların renklerini değiştirmek için;

li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #eee;
}

Not: Satırların renklendirilmesi yalnızca <pre> satır numaralandırması kullanıyorsa çalışır.

<pre class="prettyprint linenums">
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}</pre>

Satır içi Kod Kullanma

Yazacağınız kodun yazının yanında yani satır içinde görüntülenmesini istiyorsanız <pre> kodu yerine <code> kodunu kullanabilirsiniz.

Şu şekilde ; <code class="prettyprint"> kodunuz </code> yazarsanız kodunuz satır içinde görünecektir.

Umarım bu yazım  işinize yaramıştır.

Paylaş
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Bu yazıyı oylamak ister misiniz?)
Loading...

Kullanıcı Yorumları (Cevap Yok )

Henüz yorum yok.