trashhalo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/hint/javascript-hint.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/edit/matchbrackets.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
    <script src="http://code.angularjs.org/1.2.5/angular-resource.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.5/mousetrap.min.js"></script>
    <script src="playground.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.css">
    <link rel="stylesheet" type="text/css" href="playground.css">
    <meta charset="utf8" />
  </head>
  <body>
    <div class="container" ng-app="pg.app" ng-view>
        <script type="text/ng-template" id="gist.html">
          <div class="btn-group">
            <button type="button" class="btn btn-default" ng-click="runCode()">Run Script</button>
            <button type="button" class="btn btn-default" ng-click="clearOutput()">Clear Output</button>
             <button type="button" class="btn btn-default" ng-click="zen()">Zen Mode</button>
          </div>
          <div id="source" class="row"></div>
          <div id="output" class="row well"></div>
        </script>
    </div>
  </body>
</html>

## playground.css
.btn-group{
  margin-top: 5px;
  margin-bottom: 15px;
}
#source{
  border:1px solid #CCC;
  margin-bottom: 15px;
}

## playground.js
(function($) {
    console.log = function (msg) {
        var outputEl = $('#output');
        if (typeof msg === "string") {
            outputEl.append("<p>" + msg + "</p>");
        } else if (typeof msg === "object") {
            outputEl.append("<pre>" + JSON.stringify(msg) + "</pre>");
        }
    };

    var gistCtrl = function ($scope, $routeParams, $resource) {
        var Gist = $resource('https://api.github.com/gists/:id', {}, {
            get: {
                method: 'JSONP',
                params: {
                    callback: 'JSON_CALLBACK'
                },
                isArray: false
            }
        });
        var sourceMirror;
        var disableFullScreen = function(){
          sourceMirror.setOption('fullScreen', false);
        };
        sourceMirror = CodeMirror($('#source').get(0), {
            'lineNumbers': true,
            'fixedGutter': true,
            'matchBrackets': true,
            'mode': 'javascript',
            'readOnly': false,
             extraKeys:{
              "Esc": disableFullScreen
             }
        });
        var outputEl = $('#output');

        sourceMirror.on("change", function () {
          localStorage.codeSave = sourceMirror.getDoc().getValue();
        });

        $scope.runCode = function () {
            var script = $("<script type='text/javascript'>");
            script.html(sourceMirror.getDoc().getValue());
            $('head').append(script);
        };
        $scope.clearOutput = function () {
            outputEl.html("");
        };
        $scope.zen = function (){
          sourceMirror.setOption('fullScreen',true);
        };
        if ($routeParams.id) {
            Gist.get({
                id: $routeParams.id
            }, function (data) {
              $scope.gist = data.data;
              var findJsFiles = function (key) {
                  return (data.data.files[key].type === "application/javascript");
              };
              var addJsFilesToEditor = function (key, i) {
                  sourceMirror.getDoc().setValue(sourceMirror.getDoc().getValue()
                    + (i>0?"\n":"")
                    + "// " + data.data.files[key].filename + "\n"
                    + data.data.files[key].content);
              };
              var jsFiles = jQuery.grep(Object.keys(data.data.files), findJsFiles);
              angular.forEach(jsFiles, addJsFilesToEditor);
            });
        }else if(localStorage.codeSave){
          sourceMirror.getDoc().setValue(localStorage.codeSave);
        }else{
          sourceMirror.getDoc().setValue("console.log('Hello World');");
        }
        Mousetrap.bind('esc', disableFullScreen);

        Mousetrap.bind('command+r', function(e){
          $scope.$apply(function(){
            e.preventDefault();
            $scope.runCode();
          });
        });
        Mousetrap.bind('command+k', function(e){
          $scope.$apply(function(){
            e.preventDefault();
            $scope.clearOutput();
          });
        });
    };
    var createCtrlModule = angular.module('pg.gistCtrl', ['ngRoute', 'ngResource']).controller('gistCtrl', gistCtrl);
    var appModule = angular.module('pg.app', ['ngRoute', 'pg.gistCtrl']);
    appModule.config(function($routeProvider) {
        $routeProvider.
        when('/gist/:id?', {
            templateUrl: 'gist.html',
            controller: gistCtrl
        }).
        otherwise({
            redirectTo: '/gist'
        });
    });
}(jQuery));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/hint/javascript-hint.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/edit/matchbrackets.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.min.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
	<script src="http://code.angularjs.org/1.2.5/angular-resource.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.5/mousetrap.min.js"></script>
	<script src="playground.js"></script>
	<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.css">
	<link rel="stylesheet" type="text/css" href="playground.css">
	<meta charset="utf8" />
	</head>
	<body>
	<div class="container" ng-app="pg.app" ng-view>
	<script type="text/ng-template" id="gist.html">
	<div class="btn-group">
	<button type="button" class="btn btn-default" ng-click="runCode()">Run Script</button>
	<button type="button" class="btn btn-default" ng-click="clearOutput()">Clear Output</button>
	<button type="button" class="btn btn-default" ng-click="zen()">Zen Mode</button>
	</div>
	<div id="source" class="row"></div>
	<div id="output" class="row well"></div>
	</script>
	</div>
	</body>
	</html>
	.btn-group{
	margin-top: 5px;
	margin-bottom: 15px;
	}
	#source{
	border:1px solid #CCC;
	margin-bottom: 15px;
	}
	(function($) {
	console.log = function (msg) {
	var outputEl = $('#output');
	if (typeof msg === "string") {
	outputEl.append("<p>" + msg + "</p>");
	} else if (typeof msg === "object") {
	outputEl.append("<pre>" + JSON.stringify(msg) + "</pre>");
	}
	};

	var gistCtrl = function ($scope, $routeParams, $resource) {
	var Gist = $resource('https://api.github.com/gists/:id', {}, {
	get: {
	method: 'JSONP',
	params: {
	callback: 'JSON_CALLBACK'
	},
	isArray: false
	}
	});
	var sourceMirror;
	var disableFullScreen = function(){
	sourceMirror.setOption('fullScreen', false);
	};
	sourceMirror = CodeMirror($('#source').get(0), {
	'lineNumbers': true,
	'fixedGutter': true,
	'matchBrackets': true,
	'mode': 'javascript',
	'readOnly': false,
	extraKeys:{
	"Esc": disableFullScreen
	}
	});
	var outputEl = $('#output');

	sourceMirror.on("change", function () {
	localStorage.codeSave = sourceMirror.getDoc().getValue();
	});

	$scope.runCode = function () {
	var script = $("<script type='text/javascript'>");
	script.html(sourceMirror.getDoc().getValue());
	$('head').append(script);
	};
	$scope.clearOutput = function () {
	outputEl.html("");
	};
	$scope.zen = function (){
	sourceMirror.setOption('fullScreen',true);
	};
	if ($routeParams.id) {
	Gist.get({
	id: $routeParams.id
	}, function (data) {
	$scope.gist = data.data;
	var findJsFiles = function (key) {
	return (data.data.files[key].type === "application/javascript");
	};
	var addJsFilesToEditor = function (key, i) {
	sourceMirror.getDoc().setValue(sourceMirror.getDoc().getValue()
	+ (i>0?"\n":"")
	+ "// " + data.data.files[key].filename + "\n"
	+ data.data.files[key].content);
	};
	var jsFiles = jQuery.grep(Object.keys(data.data.files), findJsFiles);
	angular.forEach(jsFiles, addJsFilesToEditor);
	});
	}else if(localStorage.codeSave){
	sourceMirror.getDoc().setValue(localStorage.codeSave);
	}else{
	sourceMirror.getDoc().setValue("console.log('Hello World');");
	}
	Mousetrap.bind('esc', disableFullScreen);

	Mousetrap.bind('command+r', function(e){
	$scope.$apply(function(){
	e.preventDefault();
	$scope.runCode();
	});
	});
	Mousetrap.bind('command+k', function(e){
	$scope.$apply(function(){
	e.preventDefault();
	$scope.clearOutput();
	});
	});
	};
	var createCtrlModule = angular.module('pg.gistCtrl', ['ngRoute', 'ngResource']).controller('gistCtrl', gistCtrl);
	var appModule = angular.module('pg.app', ['ngRoute', 'pg.gistCtrl']);
	appModule.config(function($routeProvider) {
	$routeProvider.
	when('/gist/:id?', {
	templateUrl: 'gist.html',
	controller: gistCtrl
	}).
	otherwise({
	redirectTo: '/gist'
	});
	});
	}(jQuery));