Code Prettify ile Kod Satırlarını Renklendirmek

google-code-prettifyBirçoğumuz kendi blok scriptimizi yazmak isteriz.Ama bazı şeyleri gözden kaçırır yada uğraşmak zor gelir.Bunların atar damarı olan 🙂 syntax renklendiriciler.Tabi “code prettify” bize bunun kolay yolunu sunuyor ve bir eklenti halinde bizim çok basit şekilde kullanmamıza olanak sağlıyor.

Kullanımının basit olduğunu söylemiştim nettuts üzerinde gördüğüm bu eklentinin nasıl kullanıldığı daha ayrıntılı anlatılıyor ama bende bir Türkçe’sini anlatayım dedim.
Öncelikle indirdiğimiz dosyayı açıp “src” adlı klasörü masaüstüne çıkarıyoruz.Sonrasında “styles” dosyası içerisindeki “desert.css” adlı stil dosyamızı aynı şekilde src içerisine koyalım.Bir tane “index.html” dosyası oluşturup “src” klasörü içerisindeki “prettify.css ve prettify.js” adlı iki dosyamızı index dosyamıza çağıralım.Sonrasında ise aşağıdaki kod satırlarını kullanarak istediğimiz şekilde yazacağımız kod satırlarını renklendirebiliriz.

Ayrıca bu eklenti bize bir çok yazılım ve web dilleri için renklendirme seçeneği sunuyor ve bunların yamalarını bize sunuyor kullanımı da çok basit.Ben aşağıda “php” için kullandım ve sadece sınıf olarak “prettyprint lang-php” yazmam yeterli oldu.İşinize yarayacağını düşündüğüm bir eklenti.İlerleyen konularda bazı farklılıklar yapacağım aslında çok konu var ve yetiştiremiyorum ve hepsini de anlatmak istiyorum ama zaman 🙂 umarım bir daha ki konuları bu kadar geciktirmeyiz.

<!DOCTYPE html>

<html lang="tr">
<head>
   <meta charset="utf-8">
   <title>Code-Prettify</title>
   <link rel="stylesheet" href="highlighter/dessert.css" />
   <link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>

<pre class="prettyprint lang-php">
  echo "Merhaba Dünya";
</pre>
<script src="highlighter/prettify.js"></script>
<script src="highlighter/lang-php.js"></script>
<script>prettyPrint();</script>
</body>
</html>

Örneğin Demo Linki : Demoyu görüntülemek için tıklayınız
Dosya İndirme Linli : İndirmek için tıklayınız.
Diğer Diller İçin Yama Dosyaları : Yama dosyaları içi tıklayınız.

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir