.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"
});
});