Javascriptmode

/** * 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);

CSSmode

.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    }}

LESSmode

/* 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%);        }    }}

Rubymode

#!/usr/bin/ruby# Program to find the factorial of a numberdef fact(n)    if n == 0        1    else        n * fact(n-1)    endendputs 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)  endend{:id =>34, :key =>"value"}    herDocs = [<<'FOO', <<BAR, <<-BAZ, <<-`EXEC`] #comment  FOO #{literal}FOO  BAR #{fact(10)}BAR  BAZ indented    BAZ        echo hi    EXECputs herDocs

Coffeemode

#!/usr/bin/env coffeetry    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 π"

HTMLmode

<!-- Default panel --><div class="panel panel-default">   <div class="panel-heading">          <h5 class="panel-title">                     Trumbowyg                       <span class="font-weight-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 -->

JSONmode

{ "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"    }   ]  } }}

PHPmode

<?phpfunction 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;?>

SASSmode

// 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

Handlebarsmode

{{!-- Ace + :-}} --}}<div id="comments">  {{#each comments}}  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>  <div>{{body}}</div>  {{/each}}</div>