#### Editors - Code

Statistics Invoices Schedule

##### Ace code editor

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>