Bu dersimizda javascript ile yapılmış bir editör kod renklendirme plugininden bahsedeceğim.Daha önce jquery kod renklendirme plugini olana snippetden bahsetmiştim.Ama o textareadaki kodları renklendiremiyodu.
http://ustaderslik.com/konu/Jquery_Snippet_(_Kod_Renklendirici_-_Vurgulay%C4%B1c%C4%B1_)
Textareadaki kodları renklendirmek için kullanacağımız plugin ace.Resmi sayfası burası.
http://ace.c9.io/#nav=about
1-Editörümüzü yapmaya başlayalım.Öncelikle editörümüzü koyalım.
<div id="editor"></div>
2-Pluginimizi sayfaya çağıralım.
<script src="http://ace.c9.io/build/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
3-Ayarlarımızı yapalım.
<script>
var editor = ace.edit("editor");//alanımızı seçtik
editor.setTheme("ace/theme/chrome");//temamız chrome
editor.getSession().setMode("ace/mode/javascript");//yazılacak kod javascript dedik
</script>
4-Editörümüzün boyutunu css ile ayarlayalım.
<style type="text/css" media="screen">
#editor {
width:600px;
height:250px;
margin:auto;
}
</style>
Tüm bunları yaptıysanız görüntümüz şu olacaktır.
Bir çok teması bulunmakta ace editörün.
Temalar :
ambiance - chaos - chrome - clouds - clouds_midnight - cobalt - crimson_editor - dawn - dreamweaver - eclipse - github - idle_fingers - kr_theme - merbivore - merbivore_soft - mono_industrial - monokai - pastel_on_dark - solarized_dark - solarized_light - terminal - textmate - tomorrow - tomorrow_night - tomorrow_night_blue - tomorrow_night_bright - tomorrow_night_eighties - twilight - vibrant_ink - xcode
Tema değiştirmek için yukardaki temalardan birini
editor.setTheme("ace/theme/chrome");
chrome yazan yerine yazmak.
Diller :
Abab-ada-actionscript-asciidoc-assembly_x86-autohotkey-batchfile-c9search-c/c++-clojure-cobol-coffeescript-coldfusion-c#-css-curl-d-dart-diff-dot-arlang-ejs-forth-freemarker-glsl-go-groovy-haml-haskell-haxe-html-ini-jade-java-javascript-json-jsp-jsx-julia-latex-less-lisp-livescript-lsl-lua-mysql-pascal-perl-php-python-ruby-xml
Yukarda javascript kodlarsak renklenir biz başka dil kullanacaksak
editor.getSession().setMode("ace/mode/javascript");
Javascript yazan yere dil ismini yazacağız.
Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
width:600px;
height:250px;
margin:auto;
}
</style>
</head>
<body>
<div id="editor">
.logo{
width:100px;
background:red;
font-size:19px;
}
</div>
<script src="http://ace.c9.io/build/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night_eighties");
editor.getSession().setMode("ace/mode/css");
</script>
</body>
</html>
Görüntüsü :
UstaDerslik
