JavaScript ve Css ile hazırlanmış kod renklendiricileri
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
Teşekkürler güzel bir yazı olmuş. Ben hala siteme ekleyemedim. Belki şimdi ekleyebilirm.
Senin tercihin çok güzel gerçekten
Şunlardan birini javam.org içinde ayarlama zamanı geldi Erhan
SyntaxHighlighter’daki satır renklendirme çok hoş ama kod renklendirme açısından senin de tercih ettiğin SHJS daha başarılı görünüyor, SyntaxHighlighter’daki görüntü üzerine SHJS renklendirmesi bence en güzeli olacaktır
Güzel bir inceleme olmuş Erhan. Seçimin ile ilgili “ayrıntılı” değişikliği de hazırladığın örnekle çok iyi vurgulamışsın
İsim yazmasan ayrı kod renklendiricisi gibi duracak 
@Musty
SyntaxHighlighter kullanmanızı tavsiye etmem. Kodların yeni baştan kopyasını çıkartıyor. Bu performansı düşüren çok gereksiz bir olay.
SyntaxHighlighter’daki görüntü üzerine SHJS renklendirmesini ben yaptım zaten. Örnekler sayfasında mevut. Bu linkten de ulaşabilirsin.
Gördüm senin yaptığın SHJS renklendirmesini de demek istediğim SyntaxHighlighter’da satır renklendirme var hoş duruyor, bir de satır aralığı SyntaxHighlighter’dakine göre daha fazla senin düzenlemene göre, onu demek istedim. Yani SyntaxHighlighter görüntüsüne biraz daha yaklaşırsan tam süper olacak
Bilgilendirici bir yazı, teşekkürler.
@eburhan’ın modifiye ettiği shjs’nin kullanımında, renklendirilecek satır sayısı arttıkça daha fazla yer kaplamaması için;
div.yukseklik {
height: 150px; overflow: auto; padding: 0; margin: 0;
}
kullanılabilinir.
İyi çalışmalar dilerim.
Ben kod renklendirme işlemleri için GeSHi’yi kullanıyorum, hatta kendi kod türü algılama algoritmamı bile yazmıştım
fakat sunucu üzerine ek yük bindirmesi ve senin de bahsettiğin gibi sayfa kaynak kodlarını şişirmesinden dolayı kullanımda biraz sıkıntı yaşıyordum.
Bu JS/CSS kod renklendirme işlemi gerçekten göze oldukça hoş görünüyor. Yazı için gerçekten teşekkürler güzel bir noktaya temas etmişsin dostum
iyi çalışmalar
Şu anda WordPress için GesHi eklentisini kullanıyorum ama bahsettiğim bu Js/Css tabanlı kod renklendiricilerden keşke daha önceden haberim olsaymış diyorum.
Geshi aynı zamanda fonksiyon ve etiketlere ilgili kullanım klavuzlarında otomatik link oluşturmaktadır.
Ayrıca JS kapalı (veya güvenlik sebepleriyle kapatılmış) bir tarayıcıda yukarıdaki scriptler çalışmayacaktır.
Geshi nin sitemi yavaşlatması yukarıdaki JS dosyalarından fazla değildir.
geshi yükü sunucu üzerine bindirir ve html olarak karmaşık “tag soup” lar üretir. Bu tür JS’ler ise yükü kullanıcının tarayıcısına ve dolayısıyla ziyaretçi üzerine verir. Sunucu kaynaklarının tutarlı kullanılması gerektiği durumlarda bu tür uygulamalar geshi gibi sunucu taraflı çözümlere göre daha öncelikli tercih edilir. Tıpkı Ajax uygulamalarının klasik sayfalara tercih edildiği gibi.
@aziz
Herkesin tercihi farklı tabii. Ama ben GesHi’ye karşıyım. Daha önce de bahsettiğim gibi kaynak kodlara bir sürü html kodları ve boşluk karakteri ekliyor. Bu da kaynak kodların daha karmaşık bir hal almasına, sayfa boyutunun da artmasına neden oluyor.
javaScript kapalı olduğunda yukarıdaki uygulamalar kodları renkli göstermeyecek ama bu çok büyük bir problem değil. Çünkü kodları PRE ve CODE etiketleri arasına yazdığımız için web tarayıcısı bu kodların yazı tipini sayfadaki diğer yazılardan farklı gösterecektir. Böylece kodlar ile diğer yazıları birbirinden yine kolayca ayırt edebileceksiniz
Son olarak aradaki farkı göstermek için alttaki 2 resmi yükledim:
- GesHi kullanıldığında kaynak kod
- GesHi kullanılmadığında kaynak kod
Sizce hangisi daha iyi?
İşte web programcılığının ne derece yüzeysel incelendiğine bir örnek. Bunu kötü niyetle değil detaylar hakkında bilginiz olması için söylüyorum.
Kısacası, gerçekler detaylarda gizlidir.
Şimdi siz kaynak koda bakıp ne kadar uzun, ne kadar detaylı taracıyı kasar diyorsunuz. Halbuki JS ‘in nasıl çalıştığını biliyorsunuz(!)
Sizin kaynak kod diye tabir ettiğiniz görüntü sadece HTML ara yüzüdür. JS dosyası kaç satır, kaç kilobyte, ne işlemler yapıyor… Asıl tarayıcıyı kasan bunlardır. Sizin Geshi siz dediğiniz yerde JS bi o kadar çalışıyor, yani taracıyı yoruyor. Bir de JS in kaynaktan yüklenme süresi var. Geshi nin kaynak kod çıktısı 1 kb geçmez. Peki ya her refresh te yüklenen JS dosyası
@aziz
Öncelikle bu işlemin bir tercih meselesi olduğunu yeniden hatırlatmak istiyorum. isteyen istediğini kullanabilir ve eminim ki herkesin “kendine göre” haklı sebepleri vardır.
Yalnız ben yorumumda GesHi’nin tarayıcıyı kastığını söylediğimi hatırlamıyorum. PHP ile oluşturulan kodlar tarayıcıyı mı kasar yoksa sunucuyu mu kasar ayırt edebilirim sanırım (:
Bence bir web sayfasının kaynak kodları temiz kalmalıdır. Bunun en büyük yararını SEO konusunda görüyoruz. Ayrıca Semantik Web diye birşey vardır ki konuyu uzatmamak adına ona girmiyorum bile. CODE diye bir etiket varken başkasını kullanmak?
JS’nin nasıl çalıştığını ve kaynak kodları hafızada nasıl parse edip renklendirdiğini de biliyorum. Evet bu işlem tarayıcıyı kasabilir buna sözüm yok. Ama javaScript ile hazırlanmış kod renklendiricilerinin tarayıcıyı kilitleyecek kadar işlem yaptığını düşünmek yanlış.
Ayrıca benim kullandığım kod renklendiricisi sadece 10 KB. Ve senin bahsettiğin gibi sayfayı her yenilediğimizde tekrar tekrar yüklenmiyor. Neden? Çünkü web tarayıcıları js dosyalarını 1 kere yükleyip önbelleğe (cache) alırlar. Bunu da göz ardı etmemek gerekir.
İşte senin dediğin gibi. Gerçekler gerçekten de detaylarda gizli
Erhan demişki
Erhan,
İyice bir araştır, tarayıcılar ne yapıyorlar, hangi durumda önbelleğe alıyorlar, hangi durumda her seferinde içerik yenilenir.
Web dünyası Wordpress ‘ten ibaret değil. Wordpress hiçbir şey bilmeyen kullanıcıların da maksimum kolaylık ve verimle kullanabilmesi için tasarlanmış bir paket.
Manuel hazırlanmış, sıfırdan hazırlanmış web siteleri, portallar ve sistemlerde bu şekilde yürümüyor işler. meta ile , php ile yada her ne kullanılıyorsa o dilin belirteçleriyle tanımlanıyor bunlar.
Paylaşımların için sağol, dediğin gibi tercih meselesi, ancak okurların da bilmeliler ki, şu şu şunu kullanırsam bu bu bu olur. Yani detaylar herkes için önemli. Dr. bile reçete yazmadan hem muayene eder, hem allerjileriniz neler diye sorar ki , doğru tedavi uygulansın değil mi
Selamlar
@aziz
Eğer sen farklı dönüyor bu işler diye iddaa ediyorsan elbette yeniden araştırım.
Yalnız şu “WordPress’den ibaret değil” cümlesine takıldım doğrusu (: Yani tartıştığımız konunun neresiyle alâkalı anlayamadım. Günlüğümü WP ile tuttuğum için, web dünyasının WP etrafında döndüğünü düşünenlerden değilim. Benim için sadece günlük tutmaya yarayan bir ARAÇ’tır
Şunu söylemeliyim ki, böyle tartışmalar, konuşmalar çok faydalı olur. İnsanların ufkunu açar, bilgilerini tekrar gözden geçirmesini sağlar. Zaten sadece “bravo, tebrikler, helal” yazılan bloglar, forumlar, vs. insanların birbirlerini yağladıkları yerlerden başka yerler değildir ve öyle yerlere takılınmamasını şiddetle tavsiye ederim.
Asıl fayda internette görürsünüz “community forum, blog, vs.” yani topluluk,ortaklık forumu, blogunda değil; “discussion board, discussion blog, discussion forum” yani tartışma, münazara forumları, bloglarındadır.
Wordpress olayı ise şöyle;
Blogunu ziyaret edenleri yanlış yönlendirmemek adına, başka platformlarda başka olasılıklar bulunabileceğine dikkat çekmek istedim. Yoksa senin elbette hususi siteler yaratabileceğinden şüphem yok.
benim ihtiyacım vardı arada bir işim düşüyor ama bir ara tam hatrılamıyorum codecolor diye bi eklenti kullandım konularıma ekledigim youtube videolarının görünümü bozulmuştu
ben eklenti kullanmadan videoları ekliyorum youtubenin verdigi kod ile daha sonra fazlada ugraşmadım yine sorun olurdedidim nasıl olsa hepsi aynı mantık
ama SHJS deyecegim umarım sorun çıkartmazda kullanırım
uzun araştırmalar denemeler yanılmalar sonucu
http://kpumuk.info/projects/wordpress-plugins/codecolorer
öneririm
bu arada unuttugum bir soru sidede verilen “color scheme for PHP:”
çok güzel kutu içinde saga sola çekilebiliyor bunu nasıl yapmış acaba ? eklentinin bir özelligimi yoksa başka bir yöntemmi ?
Bu da Geshi tarzında .css kullanan bir renklendirici. Zaten hazırlayan da söylemiş, Geshi üzerine kurdum diye. Ekstra dil seçenekleri ve bir iki özellik eklemiş
http://support.microsoft.com/kb/234067 sayfasında ve http://www.web-caching.com/mnot_tutorial/how.html sayfasında belirtildiği üzere aksi belirtilmedikçe ve doküman stabil ise (son değiştirme tarihi talep tarihinden eski ise vs.) tarayıcı dokümanları önbellekten çağırır.
Durum böyle iken erhan’ın da belirttiği gibi Geshi tarayıcıya değil sunucu üzerine ek yük bindiriyor. Bu tür JS uygulamaları ise sunucu üzerindeki yükün bir kısmını ziyaretçiye kaydırarak bant genişliği veya sunucu kaynakları gibi bir hosting hizmeti için önemli parametrelerden tasarruf edilmesini sağlıyor. Bu JS’lerin tarayıcıya bindirdiği yük de öyle aman aman bir ağırlık olmadığından muhtemel yavaşlama faktörlerini kullanıcılar üzerine dağıtır.
Evet bir de semantik HTML durumu var tabi. Madem detaylardan bahsediyoruz buyrun size en önemli detay erişilebilirlik;
http://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_1_background_and_preparation/
Highlights programını yükledim ancak nasıl kullanacağımı çözemedim. yardımcı olursanız çok sevinirim.
@FElix
Örnekler sayfasından nasıl kullanıldığına bakabilirsin. Sayfanın kaynağını görüntülemen yeterli
yok yine olmadı bu da sorun çıkardı. bu kodları gösteren eklentiler eninde sonunda sorun çıkartıyor daha çok gelişmesi gerek. artık video popup kullanıyorum bu eklentiler yerine. sorunsuz çalışıyor.
codecolorer süper. tavsiye için teşekkürler.