"code editor"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: