<!doctype> <html> <head> <title>Mutan Editor</title> <link rel="stylesheet" href="codemirror.css"> <link rel="stylesheet" href="eclipse.css"> <script src="lib/codemirror.js"></script> <script src="lib/matchbrackets.js"></script> <script src="lib/go.js"></script> <script src="muted.js"></script> <style type="text/css"> html, body { margin: 0; padding: 0; min-height: 100%; } #debugger { height: 30%; font-family: "Monaco"; border-top: 5px solid grey; } #debugger .line { overflow: none; } #debugger .col1, #debugger .col2 { float: left; padding: 3px; } #debugger .col1 { width: 10px; padding-left: 10px -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #debugger .col2 { width: 90%; } .prompt { color: "#5089D4"; } .CodeMirror { height: 70%; font-size: 14pt; } </style> </head> <body> <textarea id="editor"></textarea> <div id="debugger"> <div class="line"> <div class="col1 prompt"> > </div> <div class="col2" contenteditable> </div> </div> </div> <script> var textArea = document.querySelector("#editor") var editor = CodeMirror.fromTextArea(textArea, { theme: "eclipse", mode: "text/html", lineNumbers: true, mode: "text/x-go", indentUnit: 8, tabSize: 8, indentWithTabs: true, }); </script> </body> </html>