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

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(https://fonts.googleapis.com/css?family=Ace:700)

html, body
  :background-color #ace
  text-align: center
  height: 100%
  /*;*********;
    ;comment  ;
    ;*********;

.toggle
  $size: 14px

  :background url(https://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>