Web sitenizden programlama kodları mı paylaşıyorsunuz? Veyahut örnek kodlar içeren yardım belgeleri mi sunuyorsunuz? Bu gibi durumlarda renklendirilmiş kodlar kullanmak, kodlarınızı okuyacak insanlara yapabileceğiniz en büyük iyiliklerdendir. Çünkü birçok kişi renklendirilmemiş ve tek renkli kodlar yerine, renklendirilmiş kodları tercih ediyor. Aynen renkli televizyonların, siyah-beyaz televizyonlara tercih edildiği gibi “Peki, programlama kodlarını nasıl renklendireceğim?” diyorsanız javascript ve css ile hazırlanmış birçok kod renklendirici mevcut. Bunlardan birisini web sayfanıza ekliyorsunuz ve bütün programlama kodlarınız otomatik olarak renklendiriliyor. “Hangi kod renklendiriciyi kullanmalıyım?” diyorsanız da bu yazımda incelediğim 5 tanesinden birisini seçebilirsiniz.

Neden renklendirilmiş kodlar?

Geçtiğimiz günlerde web günlüğümden paylaşmak için bazı küçük php sınıf (class)’ları yazdım. Daha sonra bunların her biri için ayrıntılı yardım belgeleri de hazırladım. Bu yardım belgelerinde, sınıfların nasıl kullanılacağı gösteren örnek kodlar da mevcut. Fakat yardım belgelerine örnek kodları eklerken, yazının başında bahsettiğim kod renklendiricilere ihtiyaç duydum. İnternette biraz araştırdıktan sonra CodePress, Prettify, SyntaxHighlighter, Highlight ve SHJS olmak üzere 5 tane istediğim türde kod renklendirici buldum. Bunların ortak özellikleri JavaScript ve CSS ile hazırlanmış olmalarıdır. Bu 5 kod renklendiricisinden benim seçimim SHJS (Syntax Highlighting in JavaScript) oldu. Neden seçimimin SHJS olduğunu, diğerlerini neden seçmediğimi de aşağıda kısaca anlatmaya çalıştım.

İncelemelere geçmeden önce birkaç şeye daha değinmek istiyorum. Buradaki kod renklendiriciler C, C++, C#, Java, Python… gibi pek çok programlama dilini aynı anda destekleyebiliyorlar. Fakat inceleme yaparken özellikle PHP diline verdikleri desteği göz önünde bulundurdum. Bunun için de PHP kodlarından oluşan bir inceleme kodu oluşturdum. Bu inceleme kodunu düzgün bir şekilde renklendirebiliyorlar mı kontrol ettim.

1. Codepress

Codepress, bir kod renklendiriciden ziyade daha çok bir kod editörü. Çünkü istenildiği takdirde kodlar üzerinde düzenleme de yapılabiliyor. Kod tamamlama özelliği bile mevcut. Kurulumu ise oldukça kolay. Asp, C#, Java, Perl, Ruby, SQL, VBScript, Php, Html, Css, JavaScript … gibi programlama dillerine ait kodları renklendirebiliyor. Eğer kodlar için kullandığı renkleri beğenmediyseniz languages klasöründe bulunan ilgili stil dosyasını düzenleyebiliyorsunuz. Stil dosyasındaki seçenekler kısıtlı olduğu için, istediğiniz gibi renklendirme yapmanız biraz zor.

Birkaç küçük hatayı saymazsak, test için hazırladığım inceleme kodunu başarıyla renklendirdiğini söyleyebilirim. Benim Codepress’i tercih etmememdeki en büyük neden ise yalnızca textarea etiketleri arasındaki kodları renklendirebilmesiydi. Oysaki bir kod renklendiricisi pre veya code etiketleri arasındaki kodları renklendirebiliyor olmalı. Çünkü web sayfalarına programlama kodları yazılırken en fazla pre ve code etiketleri kullanılır. Semantik web açısından da doğru olanı budur.

2. Prettify

Prettify, google’ın hazırlağı bir kod renklendiricisidir. Oldukça basittir ve kurulumu kolaydır. C, Java, Python, SQL, HTML, XML, CSS ve Javascript kodlarını renklendirebiliyor. Prettify, biri css diğeri javascript olmak üzere yalnızca iki adet dosya kullanıyor. Php, Ruby ve Perl dillerine ise tam anlamıyla destek verilmiyor. Etiket olaraksa pre ve code etiketlerinden herhangi birisini kullanabiliyorsunuz. Ayrıca stil dosyasını düzenleyerek, kodlarının hangi renkler kullanılarak gösterileceğini ayarlayabiliyorsunuz.

Aslında Prettify çok güzel bir kod renklendiricisi. Ama test için hazırladığım inceleme kodunu doğru bir şekilde renklendiremedi. İlerleyen sürümlerinde PHP diline verilen destek geliştirilirse yeniden incelemeyi düşünebilirim. Fakat şu durumda Prettify benim aradığım özelliklere sahip bir kod renklendiricisi değil. Maalesef çok basit kalıyor.

3. SyntaxHighlighter

SyntaxHighlighter, Yahoo! Developer Network tarafından tercih edilen bir kod renklendiricisidir. Kurulumu ve kullanımı kolay. Desteklediği başlıca diller C, Delphi, Java, Python, Ruby, Sql, Visual Basic, Css, JavaScript, XML, HTML ve PHP dilleri. Web sayfanızdaki pre ve code etiketleri arasındaki kodları renklendirebiliyor. Ayrıca kodlara otomatik olarak satır numarası ataması güzel bir özellik. İstediğiniz takdirde kodların renksiz hali gösterilebiliyor, çıktısı alınabiliyor veya bütün kod panoya kopyalanabiliniyor.

Bu güzel özelliklerine rağmen SyntaxHighlighter kod renklendiricisini seçmememde 3 önemli faktör rol oynadı. Birincisi PHP kodlarına tam destek verildiği söylenmesine rağmen, hazırlamış olduğum “inceleme kodunu” doğru bir şekilde renklendiremedi. İkincisi, stil dosyasını kullanarak PHP kodlarını başka renklerde göstermeyi denedim ama stil dosyası bu iş için hem karışıktı hem de oldukça kısıtlıydı. Üçüncü sebep ise beni çok şaşırttı. Çünkü SyntaxHighlighter, pre veya code etiketleri arasındaki bütün kodların önce bir kopyasını çıkartıyor. Daha sonra bu kodları sıralı bir liste içerisine yerleştiriyor. Kullanıcıya, havada oluşturulmuş (on-the-fly) bu sıralı liste gösteriliyor. Bana göre son derece gereksiz ve performans düşürücü bir işlem.

4. Highlight

Highlight, renklendirilmesi gereken kodları otomatik olarak bulabiliyor ve bu kodların hangi programlama diline ait olduğunu tespit edebiliyor. Diğer kod renklendiricilerde hangi kodun hangi programlama diline ait olduğunu siz belirtmek zorundasınız. Highlight, bu işi otomatik yapabilse bile bir kodun hangi programlama diline ait olduğunu siz belirtiğinizde, kod renklendirme işlemi daha hızlı yapılıyor. Desteklediği programlama dilleri arasında Python, Ruby, Perl, PHP, XML, HTML, CSS, Javascript, Django, VBScript, Delphi, Java, C++, SQL ve SmallTalk var. Kurulumu ve kullanımı çok kolay.

Highlight kod renklendiricisi içerisinde wp_highlight.js.php isimli bir dosya var. Bu dosya bir WordPress eklentisi. Bu eklentiyi kurarak WordPress’deki programlama kodlarınızı kolayca renklendirebiliyorsunuz. Ayrıca export.html isminde yardımcı bir dosya daha var. Bu dosyayı kullanarak kodlarınızı, herhangi bir kod renklendiricisi kullanmayan web sayfalarında da kullanabilmeniz için dönüştürebiliyorsunuz.

Bu kadar güzel özellik sunmasına rağmen, stil dosyasını yeniden düzenleyerek PHP kodlarını kendi istediğim renklerle doğru düzgün görüntüleyemedim. Highlight için tek gördüğüm eksiklik bu oldu. Bunun haricinde çok güzel bir kod renklendiricisi. Benim en çok beğendiğim ikinci kod renklendiricisi oldu.

5. SHJS (Syntax Highlighting in JavaScript)

Ve geldik benim tercihim olan SHJS isimli kod renklendiriciye. Başta C, C++, C#, Java, Pascal, Perl, Python, Ruby, SQL, Tcl, XML, CSS, Html, JavaScript ve PHP olmak üzere 25′e yakın programlama dilinin kodlarını renklendirebiliyor. Birer adet “ana” javascript ve css dosyasının yanında her bir programlama dili için ayrı ayrı javascript dosyası hazırlanmış. Önce ana javascript ve css dosyasını web sayfanıza ekliyorsunuz. Daha sonra hangi programlama diline ait kodları renklendirmek istiyorsanız o programlama dili için hazırlanmış javascript dosyasını ekliyorsunuz. Bunun sonucunda web sayfanızın pre veya code etiketleri arasındaki kodları renklendirebilir hale getirmiş oluyorsunuz. Kurulumu ve kullanımı gerçekten çok kolay.

SHJS içerisindeki stil dosyasını düzenleyerek, kod gösteriminde kullanılan renkleri ve yazı tiplerini “ayrıntılı” bir şekilde değiştirebilirsiniz. Diğer kod renklendiricileri arasında en iyi stil dosyasına sahip olanıydı. Test için hazırladığım inceleme kodunu da doğru bir şekilde renklendirmeyi başardı. İşte bu sebeplerden dolayı SHJS kod renklendiricisini tavsiye ediyorum. Bir web sayfasındaki kodları renkli bir şekilde göstermek için bence en iyi kod renklendiricisi

Sonuç

Bunların dışında örneğin yalnızca PHP ile hazırlanmış kod renklendirici uygulamalar da mevcut. Örneğin GeSHi bunlardan birisi. Fakat GeSHi kullanmanızı tavsiye etmiyorum. Çünkü kodlar arasına bir sürü boşluk ( ) karakteri, span etiketi ve stil kodları ekliyor. Bu da web sayfanızın kodlarının karmaşıklaşması demek. Arama motorları bu durumdan hoşnut olmazlar. Oysaki bu yazımda tanıttığım ve javascript-css ikilisi ile hazırlanmış kod renklendiriciler, web sayfanıza ekstra kod eklemezler. Web sayfanızın kodları her zaman temiz kalır.

Burada incelediğim 5 adet kod renklendiricisi için örnek sayfalar da hazırladım. Her birisinin php ile hazırlamış olduğum “inceleme kodunu” nasıl biçimlendirdiğine kendiniz bakabilirsiniz. Sayfalara bakarken de mümkünse web tarayıcınızın css özelliğini açıp kapatmayı unutmayın. Böylece daha rahat karşılaştırma yapabilirsiniz.

Örnek sayfalara bu bağlantıdan ulaşabilirsiniz