<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/connorfehrenbach/pen/Qpmvre?depth=everything&limit=all&order=popularity&page=3&q=code+editor&show_forks=false" />
<style class="cp-pen-styles">* {
transition: color 0.15s, background 0.15s;
}
body, html {
height: 100%;
overflow: hidden;
}
nav {
position: fixed;
background: black;
color: white;
height: 50px;
width: 100%;
}
.editor {
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
.editor iframe {
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
border: none;
}
.editor .ace_editor {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
}
.editor .ace_editor .ace_scrollbar-v {
display: none;
}
.dg.ac {
position: fixed;
z-index: 5;
}
.dg .c select {
color: #000;
}
.split .editor iframe {
width: 50%;
right: 0;
}
.split .editor .ace_editor {
left: 0;
width: 50%;
opacity: 1 !important;
}
.split .editor .dg.ac {
left: 50%;
}
</style></head><body>
<html>
<head>
<meta charset="UTF-8">
<title>Ace Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body ng-app="app" ng-controller="ctrl" ng-class="{'split':editor.splitMode}">
<div class="editor">
<iframe src="https://rawgit.com/mrdoob/three.js/master/examples/webgl_lines_dashed.html"></iframe>
<div ng-style="{opacity:editor.opacity*.01}" ui-ace="{
useWrapMode : editor.useWrapMode,
showGutter: editor.gutter,
theme:editor.theme,
mode: editor.mode,
onLoad: aceLoaded,
onChange: aceChanged
}" ng-model='value'></div>
</div>
</body>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://ace.c9.io/build/src-min-noconflict/ace.js'></script>
<script src='https://angular-ui.github.io/ui-ace/dist/ui-ace.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script><script src='https://ace.c9.io/build/src-min-noconflict/ace.js'></script><script src='https://angular-ui.github.io/ui-ace/dist/ui-ace.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>
<script >angular.module('app', ['ui.ace'])
.controller('ctrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
var themes = [
"chrome",
"clouds",
"crimson_editor",
"dawn",
"dreamweaver",
"eclipse",
"github",
"solarized_light",
"textmate",
"tomorrow",
"xcode",
"kuroir",
"katzenmilch",
"ambiance",
"chaos",
"clouds_midnight",
"cobalt",
"idle_fingers",
"kr_theme",
"merbivore",
"merbivore_soft",
"mono_industrial",
"monokai",
"pastel_on_dark",
"solarized_dark",
"terminal",
"tomorrow_night",
"tomorrow_night_blue",
"tomorrow_night_bright",
"tomorrow_night_eighties",
"twilight",
"vibrant_ink"
];
$scope.currentTheme = 14;
var modes = [
'abap',
'actionscript',
'ada',
'apache_conf',
'asciidoc',
'assembly_x86',
'autohotkey',
'batchfile',
'c9search',
'c_cpp',
'cirru',
'clojure',
'cobol',
'coffee',
'coldfusion',
'csharp',
'css',
'curly',
'd',
'dart',
'diff',
'dockerfile',
'dot',
'dummy',
'dummysyntax',
'eiffel',
'ejs',
'elixir',
'elm',
'erlang',
'forth',
'ftl',
'gcode',
'gherkin',
'gitignore',
'glsl',
'golang',
'groovy',
'haml',
'handlebars',
'haskell',
'haxe',
'html',
'html_ruby',
'ini',
'io',
'jack',
'jade',
'java',
'javascript',
'json',
'jsoniq',
'jsp',
'jsx',
'julia',
'latex',
'less',
'liquid',
'lisp',
'livescript',
'logiql',
'lsl',
'lua',
'luapage',
'lucene',
'makefile',
'markdown',
'matlab',
'mel',
'mushcode',
'mysql',
'nix',
'objectivec',
'ocaml',
'pascal',
'perl',
'pgsql',
'php',
'powershell',
'praat',
'prolog',
'properties',
'protobuf',
'python',
'r',
'rdoc',
'rhtml',
'ruby',
'rust',
'sass',
'scad',
'scala',
'scheme',
'scss',
'sh',
'sjs',
'smarty',
'snippets',
'soy_template',
'space',
'sql',
'stylus',
'svg',
'tcl',
'tex',
'text',
'textile',
'toml',
'twig',
'typescript',
'vala',
'vbscript',
'velocity',
'verilog',
'vhdl',
'xml',
'xquery',
'yaml',
];
$scope.value = '<html>';
$http.get('https://rawgit.com/mrdoob/three.js/master/examples/webgl_lines_dashed.html').
success(function(data, status, headers, config) {
$scope.value = data;
}).
error(function(data, status, headers, config) {
$scope.value = data;
});
$scope.aceLoaded = function (_editor) {
_editor.setFontSize(14);
}
$scope.aceChanged = function (_editor) {
}
var editor = function() {
this.theme = themes[$scope.currentTheme];
this.mode = 'html';
this.opacity = 65;
this.useWrapMode = true;
this.gutter = true;
this.splitMode = false;
this.themeCycle = true;
};
$scope.editor = new editor();
var gui = new dat.GUI();
var opacityCtrl = gui.add($scope.editor, 'opacity', 0, 100);
opacityCtrl.onChange(function(value) {
$scope.$apply();
});
var themeCycle = gui.add($scope.editor, 'themeCycle', true);
themeCycle.onChange(function(value) {
$scope.$apply();
});
var themeController = gui.add($scope.editor, 'theme', themes).listen();
themeController.onChange(function(value) {
$scope.$apply();
});
var modeController = gui.add($scope.editor, 'mode', modes);
modeController.onChange(function(value) {
$scope.$apply();
});
var useWrapModeCtrl = gui.add($scope.editor, 'useWrapMode', true);
useWrapModeCtrl.onChange(function(value) {
$scope.$apply();
});
var gutterCtrl = gui.add($scope.editor, 'gutter', false);
gutterCtrl.onChange(function(value) {
$scope.$apply();
});
var splitMode = gui.add($scope.editor, 'splitMode', false);
splitMode.onChange(function(value) {
$scope.$apply();
});
var themeCycle = function() {
$timeout(function(){
if($scope.editor.themeCycle) {
$scope.currentTheme = $scope.currentTheme + 1;
if($scope.currentTheme < themes.length) {
$scope.editor.theme = themes[$scope.currentTheme];
} else {
$scope.currentTheme = 0;
$scope.editor.theme = themes[$scope.currentTheme];
}
}
themeCycle();
}, 500);
}
// themeCycle();
}]);
//# sourceURL=pen.js
</script>
</body></html>
