Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
Javascript mode
/**
* In fact, you're looking at ACE right now. Go ahead and play with it!
*
* We are currently showing off the JavaScript mode. ACE has support for 45
* language modes and 24 color themes!
*/
function add(x, y) {
var resultString = "Hello, ACE! The result of your math is: ";
var result = x + y;
return resultString + result;
}
var addResult = add(3, 2);
console.log(addResult);
CSS mode
.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12pX;
cursor: text;
}
.blinker {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
40.5% {
opacity: 1
}
100% {
opacity: 1
}
}
LESS mode
/* styles.less */
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
// Box styles
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
a {
color: @base;
&:hover {
color: lighten(@base, 50%);
}
}
}
Ruby mode
#!/usr/bin/ruby
# Program to find the factorial of a number
def fact(n)
if n == 0
1
else
n * fact(n-1)
end
end
puts fact(ARGV[0].to_i)
class Range
def to_json(*a)
{
'json_class' => self.class.name, # = 'Range'
'data' => [ first, last, exclude_end? ]
}.to_json(*a)
end
end
{:id => 34, :key => "value"}
herDocs = [<<'FOO', <<BAR, <<-BAZ, <<-`EXEC`] #comment
FOO #{literal}
FOO
BAR #{fact(10)}
BAR
BAZ indented
BAZ
echo hi
EXEC
puts herDocs
Coffee mode
#!/usr/bin/env coffee
try
throw URIError decodeURI(0xC0ffee * 123456.7e-8 / .9)
catch e
console.log 'qstring' + "qqstring" + '''
qdoc
''' + """
qqdoc
"""
do ->
###
herecommend
###
re = /regex/imgy.test ///
heregex # comment
///imgy
this isnt: `just JavaScript`
undefined
sentence = "#{ 22 / 7 } is a decent approximation of π"
HTML mode
<!-- Default panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
WYSIHTML5
<span class="text-semibold">Default</span>
<small>Full featured toolbar</small>
</h5>
<ul class="panel-heading-icons">
<li><a href="#" data-panel="collapse"><i class="icon-arrow-down2"></i></a></li>
<li><a href="#" data-panel="reload"><i class="icon-reload"></i></a></li>
<li><a href="#" data-panel="move"><i class="icon-move"></i></a></li>
<li><a href="#" data-panel="close"><i class="icon-close"></i></a></li>
</ul>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<!-- /default panel -->
JSON mode
{
"query": {
"count": 10,
"created": "2011-06-21T08:10:46Z",
"lang": "en-US",
"results": {
"photo": [
{
"farm": "6",
"id": "5855620975",
"isfamily": "0",
"isfriend": "0",
"ispublic": "1",
"owner": "32021554@N04",
"secret": "f1f5e8515d",
"server": "5110",
"title": "7087 bandit cat"
},
{
"farm": "4",
"id": "5856170534",
"isfamily": "0",
"isfriend": "0",
"ispublic": "1",
"owner": "32021554@N04",
"secret": "ff1efb2a6f",
"server": "3217",
"title": "6975 rusty cat"
},
{
"farm": "6",
"id": "5856172972",
"isfamily": "0",
"isfriend": "0",
"ispublic": "1",
"owner": "51249875@N03",
"secret": "6c6887347c",
"server": "5192",
"title": "watermarked-cats"
}
]
}
}
}
PHP mode
<?php
function nfact($n) {
if ($n == 0) {
return 1;
}
else {
return $n * nfact($n - 1);
}
}
echo "\n\nPlease enter a whole number ... ";
$num = trim(fgets(STDIN));
// ===== PROCESS - Determing the factorial of the input number =====
$output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n";
echo $output;
?>
SASS mode
// sass ace mode;
@import url(http://fonts.googleapis.com/css?family=Ace:700)
html, body
:background-color #ace
text-align: center
height: 100%
/*;*********;
;comment ;
;*********;
.toggle
$size: 14px
:background url(http://subtlepatterns.com/patterns/dark_stripes.png)
border-radius: 8px
height: $size
&:before
$radius: $size * 0.845
$glow: $size * 0.125
box-shadow: 0 0 $glow $glow / 2 #fff
border-radius: $radius
&:active
~ .button
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4)
~ .label
font-size: 40px
color: rgba(0,0,0,0.45)
&:checked
~ .button
box-shadow: 0 15px 25px -4px #ace
~ .label
font-size: 40px
color: #c9c9c9
Handlebars mode
{{!-- Ace + :-}} --}}
<div id="comments">
{{#each comments}}
<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
<div>{{body}}</div>
{{/each}}
</div>