Move from ace to codemirror

by DerpMarine

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Editor</title>
</head>
<style>

 .cm-s-custom.CodeMirror { background: #f7f7f7; color: #3a3432; width: 100%; height: 100%}
.cm-s-custom div.CodeMirror-selected { background: #d6d5d4; }

.cm-s-custom .CodeMirror-line::selection, .cm-s-3024-day .CodeMirror-line > span::selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d6d5d4; }
.cm-s-custom .CodeMirror-line::-moz-selection, .cm-s-3024-day .CodeMirror-line > span::-moz-selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d9d9d9; }

.cm-s-custom .CodeMirror-gutters { background: #f7f7f7; border-right: 0px; }
.cm-s-custom .CodeMirror-guttermarker { color: #db2d20; }
.cm-s-custom .CodeMirror-guttermarker-subtle { color: #807d7c; }
.cm-s-custom .CodeMirror-linenumber { color: #807d7c; }

.cm-s-custom .CodeMirror-cursor { border-left: 1px solid #5c5855; }

.cm-s-custom span.cm-comment { color: #cdab53; }
.cm-s-custom span.cm-atom { color: #a16a94; }
.cm-s-custom span.cm-number { color: #a16a94; }

.cm-s-custom span.cm-property, .cm-s-3024-day span.cm-attribute { color: #01a252; }
.cm-s-custom span.cm-keyword { color: #db2d20; }
.cm-s-custom span.cm-string { color: #fded02; }

.cm-s-custom span.cm-variable { color: #01a252; }
.cm-s-custom span.cm-variable-2 { color: #01a0e4; }
.cm-s-custom span.cm-def { color: #e8bbd0; }
.cm-s-custom span.cm-bracket { color: #3a3432; }
.cm-s-custom span.cm-tag { color: #db2d20; }
.cm-s-custom span.cm-link { color: #a16a94; }
.cm-s-custom span.cm-error { background: #db2d20; color: #5c5855; }

.cm-s-custom .CodeMirror-activeline-background { background: #e8f2ff; }
.cm-s-custom .CodeMirror-matchingbracket { text-decoration: underline; color: #a16a94 !important; }
</style>
<body>


<form action="#"...

CSS

body {
         overflow: auto; height: 100%; width: 100%; clear: both;
    }
    
    #editor { 
        margin: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; font-size: 18px !important;
        overflow: auto; height: 100%;
    }
.submit_but {
      position: absolute; bottom: 10px; right: 20px;
      background: #fff; border: none; padding: 5px 20px;
    margin-top: 20px; border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px; font-size: 16px;font-weight: bold; font-family: Tahoma; cursor: pointer; z-index: 9999999999;
     }