JavaScript Editör Kodlarını Renklendirmek (ace)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

JavaScript Editör Kodlarını Renklendirmek (ace)

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(2473)
RAPOR ET
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.
http://r1310.hizliresim.com/1g/8/td18q.png

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ü :
http://ustaderslik.com/resim/ders/td1hf.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol