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