Yılın ilk yazısında yıl boyunca tüm yazılarınızda kullanabileceğiniz bir kolaylıktan bahsetmek istiyorum; kod renklendirmek! Özellikle teknik makale yazanların en büyük dertlerinden biri de Visual Studio içerisinde kod renklendirmeleri gibi web sayfalarında da kodların renkli olarak gözükmesini sağlamaktır. Bu kapsamda bazıları kodların resim dosyaları olarak sitelerine koyar fakat bu durum okunabilirlilik açısından sorun yaratmasa da "kodları kopyalayamayan milyonlar" :) tarafından küfür yemenize ramak kaldı demektir!

Bugün aslında çok basit bir JavaScript kütüphanesinden bahsedeceğiz. Bu kütüphane sayesinde aşağıdaki dillerle yazılmış tüm kodları otomatik olarak sayfa içerisinden JavaScript ile renklendirebiliyorsunuz.

Yukarıdaki listede desteklenen dillerin yanında bir de MicroFormat tanımlarını bulabilirsiniz. Bunların ne şekilde kullanıldığına birazdan değineceğiz.

Color Coding için altyapı hazırlıkları...

İlk olarak sitenizdeki tüm kodları PRE tagları arasına almanız gerekiyor. Eğer kodlarınız içerisinde XML'de olduğu gibi < ve > işaretleri varsa bu sefer de bir textarea kullanabilirsiniz. Söz konusu tagların hepsine isim olarak aynı ismi vermeniz gerek. Ayrıca tagların CSS class isminin de yukarıdaki listede bulunan dillere göre MicroFormat'lardan alınması şart. Gelin hızlı bir örnekle nasıl bir şeyden bahsettiğimizi görelim.

<pre name="code" class="vb.net">

Dim x as string

</pre>

Gördüğünüz gibi PRE tagının ismi CODE ve class değeri de vb.net şeklinde ayarlanmış. Birazdan yazacağımız JavaScript kodunda sayfada adı code olan tüm tagların içeriğinin renklendirilmesini belirteceğiz ve renklendirme yapılırken her bir code adındaki tagın class ismine bakılarak hangi dilde kod yazıldığını anlaşılacak. Peki tüm bunları nasıl yapacağız?

İlk olarak buradan kullanacağımız tüm JavaScript dosyalarını indirebilirsiniz. Dosyalar içerisinde kodların görselliğini ayarlayacak bir CSS ve bir de clipboard kopyalama sistemi için Flash dosyası bulunuyor. Özellikle bilgisayarınıza tüm dosyaları indirdiğinizde scripts klasörüne bakarsanız aslında her dil için ayrı ayrı JavaScript dosyaları bulunduğunu görebilirsiniz. Paketteki shCore.js dosyası tüm renklendirme sisteminin ana dosyası. Diğer JS dosyaları ise ayrı ayrı dillere özel olarak hazırlanmış. Bu dosyalardan hangilerini istiyorsanız onları sayfanıza eklemeniz yeterli olacaktır.

<link type="text/css" rel="stylesheet" href="styles/SyntaxHighlighter.css"></link>

<script language="javascript" src="scripts/shCore.js"></script>

<script language="javascript" src="scripts/shBrushVb.js"></script>

<script language="javascript">window.onload = function ()

{    dp.SyntaxHighlighter.ClipboardSwf = '/scripts/clipboard.swf';   

dp.SyntaxHighlighter.HighlightAll('code');}</script>

Yukarıda gördüğünüz kodları sayfanıza yerleştirirseniz aslında tüm gerekli ayarları da tamamlamış oluyorsunuz. Böylece gerekli CSS sınıfları ve JavaScript kütüphaneleri sayfaya eklenmiş oldu. Son olarak sayfa açıldığında da hem ClipBoard için kullanacağımız Flash dosyasını hem de sayfada taranacak tagların isimlerini aktarmış olduk.

Renklendirilmiş kodumuz.

Yukarıda gördüğünüz son görsel şekil yazdığımız kodların sonucu ortaya çıkıyor. JavaScript kütüphanesi PRE taglarından böyle bir görsellik yaratıyor. Eğer isterseniz bu görsellik içerisinde bazı noktaları da PRE taglarına ek parametreler ekleyerek tanımlayabilirsiniz.

<pre name="code" class="vb.net:nocontrols:firstline[10]">">

Dim x as string

</pre>

Yukarıdaki kod içerisinde class değerinde kullandığımız dili tanımladıktan sonra üst üste iki nokta koyarak diğer parametrelerimizi de yazabiliyoruz. Bu parametrelerden nocontrols parametresi görsel arayüzde üstteki düğmelerin gözükmemesini sağlarken firstline ise kod görünümüzdeki ilk satırın satır numarasını belirliyor.

Hepinize yeni yılda bol paylaşımlı günler dilerim ;)