Implementar Editor CodeMirror

CodeMirror es un componente de JavaScript que proporciona un editor de código en el navegador.

Web Oficial : https://codemirror.net

https://cdnjs.com/libraries/codemirror/

Code Mirror 6:

https://codemirror.net/6/
https://github.com/codemirror/codemirror.next

Ejemplo: https://codepen.io/davidheath/pen/xLqYRE

1) Implementado Js y css para CodeMirror:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/selection/active-line.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/edit/matchbrackets.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/display/autorefresh.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.css"/>

Problema ocurrido: El editor de codemirror no carga contenido hasta que hace clic 
Solución= hay que cargar el autorefresh.js  en el codigo de arriba lo hemos implementado y recuerda en el script tabien hay que llamarlo autoRefresh:true, .

2) El html:

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

3 ) El estilo:

<style>
.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;}
</style>

4) El Script:

<script type="text/javascript">
	$(document).ready(function(){
	var code = $(".codemirror-html")[0];
	var editor = CodeMirror.fromTextArea(code, {
	  lineNumbers : true,
    tabSize:3,
    styleActiveLine: true,
    theme:"udb-dark",
    matchBrackets: true,
   autoRefresh: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,
    autoRefresh: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,
    autoRefresh:true,
    mode: "css"
	});
});	
</script>

Nota Mode puede ser:

mode: "xml",

No te Olvides de ver  Implementar themes al editor CodeMirror