Bu CKEditor syntaxhighlight eklentisi için kisa bir kurulum kilavuzdur. Syntaxhighlight eklentisi CKeditör ile programlama dilleri kodlari yazarken daha sade,renkli ve düzgün bir biçimde gösterilmesini sagliyor. Wakti zamaninda ckeditörüme syntaxhighlight eklentisi eklemek istemistim ama yapamamistim. Internette bununla ilgili pek fazla kaynak yok zannediyorum, aramistim bulamamistim. Ama yine aklima geldi, web sayfamda paylastigim kodlarin daha düzgün bir biçimde gösterilmesi için syntaxhighlight eklentisi gerekti ve arastirmaya basladim... Sonunda kurulumunu buldum ve yazimda paylasacagim....
http://alexgorbatchev.com/SyntaxHighlighter/download/ sayfasindan SyntaxHighlighter eklentisini indiriyoruz... Indirdikten sonra dosyamizi açip scripts,styles dosyalarini web sayfasi dizinimize kopyaliyoruz...
Web sayfasi dizinine koplayadiktan sonra ben default.aspx sayfamdan örnek verecegim... default.aspx sayfami açiyorum ve
<script type="text/javascript" src="js/scripts/shCore.js"></script>
<script type="text/javascript" src="js/scripts/shLegacy.js"></script>
<script type="text/javascript" src="js/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="js/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="js/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="js/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="js/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="js/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="js/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="js/scripts/shBrushJavaFx.js"></script>
<script type="text/javascript" src="js/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="js/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="js/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="js/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="js/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="js/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
head taglari arasina yukaridaki baglanti yollarimi belirtiyorum... css yolumu ve sitemde hangi programlama dillerini paylasacagimi söylüyorum... Mesela siz Vb.Net kodlari paylasacaksiniz ama yukarida diye belirtmediyseniz eger syntaxhighlight ekletiniz çalismayacaktir. Bunlara dikkat edelim... Kurulumun zaten pek bir zorlugu bulunmuyor.ardindan ckeditor-syntaxhighlight-1.0.tar eklentimizi indiriyoruz....
CKEditör 3 versiyonlari için yeni sürüm :
Syntaxhighlight_ver.1.3_CKEditor_Plugin
Kurulum asamalari
- ckeditor-syntaxhighlight eklentimizi indirdikten sonra açiyoruz ve plugins klasörü içesindeki syntaxhighlight klasörünü CKEditör klasörümüz içindeki plugins klasörü içerisine koplayaliyoruz.
- Kopyalama islemini yaptiktan sonra CKEditör klasörü içerisindeki config.js dosyasini açiyoruz ve
config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);
kodlarini yaziyoruz...
- Bütün islem bu kadar... Ardindan CKEditorumuzu çalistirdigimizda syntaxhighlight butonun eklendigini göreceksiniz. Butona bastigimizda kodlarimizi yapistiriyoruz ve dilimizi seçiyoruz tamam butonuna basiyoruz ve kodlarimiz CKEditörümüze eklenmis oluyor.
Örnek uygulamayi buradan indirebilirsiniz.