Ramazan Belyurt

B.T. Öğretmeni
Bursa/Türkiye
ramazanbelyurt@gmail.com
www.ramazanbelyurt.name.tr


Ckeditor Codesnippet Plugin Eklentisi ile Kod Renklendirme

14.02.2016        Yazar:Ramazan Belyurt               Okunma:3173

Ckeditor web sayfalarına makale eklerken kullandığımız textarea editörüdür. Ofice programlarına benzer bir yapıya sahiptir. Yazılarımızı düzenlemek için bize bir çok araç sunar. Ckeditörün bir çok plugini(eklenti) vardır. Ckeditör ile bazı işlemleri  yapabilmek için bize bir çok eklenti sunar.

Codesnippet eklentisi blogunda kod paylaşımı yapacaklar için kod renklendirmesi yapan bir eklentidir. Kod renklendirmesi için bir çok programlama dilini desteklemektedir(php,c#,css,html vb). Bu eklentiyi Ckeditore sonradan eklemek istediğimizde bazı sorunlar çıkmaktadır. Sorun yaşamadan bu eklentiyi Ckedtore eklemek için sitesinden Codesnippet eklentisi eklenmiş halini indrmemiz daha mantıklı olacaktır. Sadece Codesnippet eklentisi değil istediğimiz bir çok eklentiyi ekleyerek indirebiliriz.

Ckeditorü istediğimiz eklentiler ile birlikte indirmek için ckeditor.com/builder adresine gitmemiz gerekir.

Yukarıdaki resimde öncelikle Ckeditorün hangi sürümünü indireceğimizi seçiyoruz.

Yukarıdaki resimde de sağ tarafta bulunan plugin listesinden istediğimiz plugini seçerek sol tarafa ekliyoruz.Biz Codesnippet plugini anlattığımız için onu seçiyoruz ve sol tarafa ekliyoruz.

Daha sonra sırayla Ckeditor temamızı, istediğimiz dilleri seçtikten sonra download ediyoruz.

Ckeditoru indirdikten sonra zipten çıkarıyoruz ve web projemizin kök dizinine kopyalıyoruz. Daha sonra aşağıdaki kodu Ckeditorü ekleyeceğimiz sayfanın head tagları arasına yapıştırıyoruz.Ckeditorün dosya yolunu projemize göre değiştiriyoruz.

<head>

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

</head>

Form yapımızda Ckeditörümüzü eklemek istediğimiz Textarea kontroüne <textarea class="ckeditor"></textarea> şeklinde ekleyerek aktifleştiriyoruz. Aktifleştirdiğimiz zaman Ckeditorun araçlar panelinde   simgesi görünecektir. Yazımıza kod ekleyeceğimiz zaman bu simgeye tıklayarak hangi kodu yazıyorsak onu seçerek kodlarımızı yazıyoruz.Daha sonra kodları göstereceğimiz sayfanın head tagları arasına aşağıdaki kodları ekliyoruz.

<head>

<link rel="stylesheet" href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai.css">

<script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js" type="text/javascript"></script>
  <script>hljs.initHighlightingOnLoad();</script>

</head>

 



Yorum Ekleyin




İlhan Albayrak

Çok faydalı bir paylaşım; teşekkürler, emeğinize sağlık.


Muhammed Yaman
ilk eklenilen ckeditore sonradan codesnippet eklemesi flan ben yapamadıydım,çok teşekkürler güzel paylaşım :) bu arada <textarea class="ckeditor" id="editor1"></textarea> bu şekilde eklenirse çalışıyor ;)
Yaşar yılmaz
Ben bunu ekliyorum fakat kodlar tam ortalı olarak gorunuyor nasıl hizalayabilirim ayrıca kodlar kopyaladığım düzen ile aynı gelmıyor
Faydalı Linkler