<h4>HTML Editor</h4>
<textarea class="codemirror-html"></textarea>
<h4>Javascript Editor</h4>
<textarea class="codemirror-js"></textarea>
<h4>CSS Editor</h4>
<textarea class="codemirror-css"></textarea>
.CodeMirror{
  height:170px!important;
}
h4{
  font-size:18px;
  padding:0;
  margin:0;
}
/* code above just for demo */

.cm-s-udb-dark.CodeMirror {
  background: #1B2B34;
  color: #f7f7f7;
  font-size: 16px;
}
.cm-s-udb-dark div.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.05);
}
.cm-s-udb-dark .CodeMirror-line::selection,
.cm-s-udb-dark .CodeMirror-line > span::selection,
.cm-s-udb-dark .CodeMirror-line > span > span::selection {
  background: rgba(255, 255, 255, 0.05);
}
.cm-s-udb-dark .CodeMirror-line::-moz-selection,
.cm-s-udb-dark .CodeMirror-line > span::-moz-selection,
.cm-s-udb-dark .CodeMirror-line > span > span::-moz-selection {
  background: rgba(255, 255, 255, 0.05);
}
.cm-s-udb-dark .CodeMirror-gutters {
  background: #222;
  border-right: 1px solid #aaa;
}
.cm-s-udb-dark .CodeMirror-guttermarker {
  color: white;
}
.cm-s-udb-dark .CodeMirror-guttermarker-subtle {
  color: #aaa;
}
.cm-s-udb-dark .CodeMirror-linenumber {
  color: #aaa;
}
.cm-s-udb-dark .CodeMirror-cursor {
  border-left: 1px solid white;
}
.cm-s-udb-dark .cm-keyword {
  color: #ec5f67;
}
.cm-s-udb-dark .cm-atom {
  color: #c594c5;
}
.cm-s-udb-dark .cm-number {
  color: #c594c5;
}
.cm-s-udb-dark .cm-def {
  color: #f99157;
}
.cm-s-udb-dark span.cm-variable {
  color: #ec5f67;
}
.cm-s-udb-dark span.cm-variable-2{} 
  color: #6699cc;
}
.cm-s-udb-dark span.cm-variable-3,
.cm-s-udb-dark span.cm-def,
.cm-s-udb-dark span.cm-type {
  color: #f99157;
}
.cm-s-udb-dark .cm-operator {
  color: #cda869;
}
.cm-s-udb-dark .cm-comment {
  color: #65737e;
}
.cm-s-udb-dark .cm-string {
  color: #fac863;
}
.cm-s-udb-dark .cm-string-2 {
  color: #bd6b18;
}
.cm-s-udb-dark .cm-meta {
  background-color: #141414;
  color: #f7f7f7;
}
.cm-s-udb-dark .cm-builtin {
  color: #cda869;
}
.cm-s-udb-dark .cm-tag {
  color: #ec5f67;
} /**/
.cm-s-udb-dark .cm-attribute {
  color: #99c794;
} 
.cm-s-udb-dark .cm-property {
  color: #99c794;
} 
.cm-s-udb-dark .cm-header {
  font-weight: bold;
}
.cm-s-udb-dark .cm-hr {
  color: #AEAEAE;
}
.cm-s-udb-dark .cm-link {
  color: #c594c5;
  text-decoration: none;
}
.cm-s-udb-dark .cm-error {
  background: rgba(236, 95, 103, 0.4);
}
.cm-s-udb-dark .CodeMirror-activeline-background {
  background: rgb(30, 61, 78);
}
.cm-s-udb-dark .CodeMirror-matchingbracket {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.cm-s-udb-dark .cm-qualifier {
    color: #ecc854;
}

.box, .editor .top-boxes, .CodeMirror-gutter-wrapper, 
body.project .editor-pane, 
body.project .editor{background:#1B2B34;}
.CodeMirror-cursor{border-left-color:#FFFFFF;}.CodeMirror pre, 
.box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre{color:#CDD3DE;}.cm-keyword{color:#EC5f67;}.cm-atom{color:#C594C5;}.box-html .cm-atom{color:#C594C5;}.cm-def{color:#F99157;}.cm-variable{color:#99C794;}.cm-variable-2{color:#6699CC;}.cm-variable-3{color:#CDD3DE;}.cm-header{color:#CDD3DE;}.cm-number{color:#CDD3DE;}.cm-property{color:#99C794;}.cm-attribute{color:#99C794;}.cm-builtin{color:#CDD3DE;}.cm-qualifier{color:#CDD3DE;}.cm-operator{color:#CDD3DE;}.cm-meta{color:#CDD3DE;}.cm-string{color:#FAC863;}.cm-string-2{color:#FAC863;}.cm-tag{color:#EC5f67;}.box-css .cm-tag{color:#EC5f67;}.cm-tag.cm-bracket{color:#EC5f67;}.CodeMirror-linenumber{color:#5D5D5D;}.CodeMirror-guttermarker-subtle{color:#5D5D5D;}.cm-comment{color:#65737e;}.cm-searching, .CodeMirror-focused .CodeMirror-selected, .CodeMirror-selected{background-color:#263844;}
$(document).ready(function(){
	var code = $(".codemirror-html")[0];
	var editor = CodeMirror.fromTextArea(code, {
	  lineNumbers : true,
    tabSize:3,
    styleActiveLine: true,
    theme:"udb-dark",
    matchBrackets: true,
    mode: "text/html"
	});
});
$(document).ready(function(){
	var code = $(".codemirror-js")[0];
	var editor = CodeMirror.fromTextArea(code, {
	  lineNumbers : true,
    tabSize:3,
    styleActiveLine: true,
    theme:"udb-dark",
    matchBrackets: true,
    mode: "javascript"
	});
});
$(document).ready(function(){
	var code = $(".codemirror-css")[0];
	var editor = CodeMirror.fromTextArea(code, {
	  lineNumbers : true,
    tabSize:3,
    styleActiveLine: true,
    theme:"udb-dark",
    matchBrackets: true,
    mode: "css"
	});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/javascript/javascript.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/css/css.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/xml/xml.min.js
  6. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/selection/active-line.js
  7. https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/edit/matchbrackets.min.js