Gratuitous self-promotion will follow

I made a website with some of the same goals in mind that takes it quite a bit further than this. That being said, I can't even come close to pretending its less than 56 lines of code.

Check out: http://plunker.no.de

Some neat features:

* Live collaboration using 'streams'

* Plunks run as first-class web citizens letting AJAX and company work out of the box

* Syntax hilighting using ajax.org's amazing ace editor

* jsHint

* Live compilation/rendering of coffee-script/markdown and I forget what else

The full source of the running app is at: https://github.com/ggoodman/stsh

Also a ground-up rewrite on http://plnkr.co has its code on: https://github.com/filearts/plunker

+1 for Plunker.

It confused me at first, but if you want to start a new blank plunk go to "Editor" or click here: http://plunker.no.de/edit

The UI is kind of clunky.

Clunky?! I'm only surprised that you say that because one of my goals was to try and keep the ui out of the way. I'm still trying to think of a way to have all the necessary elements while staying minimal.

Do you prefer its look when the 'responsive' styles kick in?

I just tried to use the editor again; I was going to open jsfiddle but said why not. There is no way to create a new file. I remember a while back you could at least preload a bootstrap template. All in all, I still like the editor interface but there needs to be a few controls.

The only issue with a 'clunky ui' is the homepage but that might just be a side effect of bootstrap.

On that note, I'd also like to be able to load more frameworks than just BootStrap. Here are a few suggestions:

[1] http://foundation.zurb.com

[2] http://www.getskeleton.com/

[3] http://blueprintcss.org/

[4] http://960.gs/

</featurecreep>

Hello woodall, you can add a file by clicking the plus button in the bottom left of the screen. If that button doesn't appear for you, then that's a whole other issue. Please let me know. Similarly, the minus button removes files. Double-clicking a filename lets you rename it.

Edit: Just noticed how unintuitive the position of the +/- buttons are. I'll see what I can do for Plunker 2.0

There's also http://bl.ocks.org/ which is a similar concept I believe.

That's awesome! I wish I'd seen that before spending all day... Actually nah, it was fun!

Yeah, the more the merrier!

Just discovered GoodFilms! Brilliant idea - I will be back often. I've felt a similar frustration with jsFiddle not supporting Coffee+friends so kudos for that one too.

http://fiddlesalad.com/ < Supports HAML, SASS, Coffee and many others. Not as clean as jsfiddle, but makes up for it with its features. Oh and there's documentation too.

This is pretty clever. Were you trying to code golf, or did that just sortof happen?

A bit by accident, but then I realised I was in <80 lines and decided to compact it where I could. I wanted to keep it fairly readable, though, so didn't go too far.

In Firefox 12 I get in Firebug the error message :

    Error: Showdown is not defined
    (n)@http://2879097.run-a-gist.herokuapp.com/application.js:8
    d((function ($http) {var showdown;showdown = new Showdown.converter;return {restrict: "E", compile: function (tElement, tAttrs) {tElement.html("<article class='markdown' ng-bind-html-unsafe='markdown(" + tAttrs.model + ")'></article>");return function (scope, element, attrs) {scope[tAttrs.model] = "";$http.get(attrs.src).success(function (data) {return scope[tAttrs.model] = data;});return scope.markdown = showdown.makeHtml;};}};}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:26
    ((function ($http) {var showdown;showdown = new Showdown.converter;return {restrict: "E", compile: function (tElement, tAttrs) {tElement.html("<article class='markdown' ng-bind-html-unsafe='markdown(" + tAttrs.model + ")'></article>");return function (scope, element, attrs) {scope[tAttrs.model] = "";$http.get(attrs.src).success(function (data) {return scope[tAttrs.model] = data;});return scope.markdown = showdown.makeHtml;};}};}),0,[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:35
    l([object Array],(function (a) {"use strict";try {var f = b.invoke(a);if (P(f)) {f = {compile: A(f)};} else if (!f.compile && f.link) {f.compile = A(f.link);}f.priority = f.priority || 0;f.name = f.name || d;f.require = f.require || f.controller && f.name;f.restrict = f.restrict || "A";e.push(f);} catch (j) {c(j);}}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:6
    ([object Object],(function (a, c) {"use strict";b.error.apply(b, arguments);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:35
    d((function (b, c) {"use strict";var e = [];l(a[d], function (a) {try {var f = b.invoke(a);if (P(f)) {f = {compile: A(f)};} else if (!f.compile && f.link) {f.compile = A(f.link);}f.priority = f.priority || 0;f.name = f.name || d;f.require = f.require || f.controller && f.name;f.restrict = f.restrict || "A";e.push(f);} catch (j) {c(j);}});return e;}),[object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:27
    ([object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:28
    c("markdownDirective")@http://code.angularjs.org/angular-1.0.0rc10.min.js:25
    z([object Array],"markdown","E",(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:43
    G([object HTMLUnknownElement],[object Array],[object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
    w([object Proxy],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
    w([object Proxy],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
    w([object Object],(void 0),[object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:38
    o([object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:36
    ([object Object],(void 0))@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
    ((function () {"use strict";b.data("$injector", g);c(b)(a);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:83
    ((function () {"use strict";b.data("$injector", g);c(b)(a);}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:83
    ([object Object],o,[object Object])@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
    d((function (a, c, g) {"use strict";a.$apply(function () {b.data("$injector", g);c(b)(a);});}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:26
    mb([object Object],[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
    dc([object HTMLDocument],mb)@http://code.angularjs.org/angular-1.0.0rc10.min.js:15
    ()@http://code.angularjs.org/angular-1.0.0rc10.min.js:155
    a([object Event])@http://code.angularjs.org/angular-1.0.0rc10.min.js:111
    (a,0,[object Array])@http://code.angularjs.org/angular-1.0.0rc10.min.js:22
    l([object Array],(function (a) {"use strict";try {a.call(b, c);} catch (e) {}}))@http://code.angularjs.org/angular-1.0.0rc10.min.js:6
    ([object Event])@http://code.angularjs.org/angular-1.0.0rc10.min.js:22

    http://code.angularjs.org/angular-1.0.0rc10.min.js
    Line 58