SIDEBAR SKINS

HEADER SKINS

### Code editors

#### Ace Editor

##### HTML Mode

<!-- Default panel --> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"> Panel Title <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 -->

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

.nav ul { margin: 0; padding: 0; list-style: none; } .nav li { display: inline-block; } .nav a { display: block; padding: 6px 12px; text-decoration: none; }

##### SCSS Mode

.nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

##### Json Mode

{ "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 27, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" }, { "type": "mobile", "number": "123 456-7890" } ], "children": [], "spouse": null }

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

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

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

#### Code mirror

##### Code Editable

<!-- Create a simple CodeMirror instance --> <link rel="stylesheet" href="http://www.urbanui.com/"> <script src="http://www.urbanui.com/"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: true }); </script>

##### Shell Mode

#!/bin/bash # clone the repository git clone http://github.com/garden/tree # generate HTTPS credentials cd tree openssl genrsa -aes256 -out https.key 1024