Web sayfalarında otomatik kod renklendirmek.

0 dakikada yazıldı

4618 defa okundu

Düzenle

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.


Dil Adı Dile ait MicroFormat
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt


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.
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 ;)