CodeMirror One Dark

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/developit/39e7a58ed3e8bc5e8eb4/raw/7a98859141909389879aadffaa0a0ebf2437473e/one-dark.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<script src="https://codemirror.net/5/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/5/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/5/mode/xml/xml.js"></script>
<script src="https://codemirror.net/5/mode/css/css.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/ayu-mirage.css">
<div class="wrapper">
  <div class="code">
    <div class="d-flex"><span class="ml-auto">HTML</span></div>
    <textarea row="30" id="asdf">
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;&gt;

    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 ...

SCSS

body {
	margin: 1rem;
	background-color: rgb(31, 34, 39);
}

.cm-s-ayu-mirage.CodeMirror {
    background: #1b1b1b!important;
		
		}

.cm-s-ayu-mirage.CodeMirror { background: rgb(31, 34, 39); }
.cm-s-ayu-mirage .CodeMirror-gutters { background: #1c1b1b; border-right: 0px; }
div.CodeMirror pre,
div.CodeMirror-linenumber,
code {
    font-family: 'source-code-pro', Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
}


div.code>div>span {
	font-family: "consolas";
	margin-left: auto;
	margin-top: -5px;
	margin-right: -5px;
	/*color: rgba(200, 200, 200, 0.2);*/
	background-color: rgba(20, 20, 20, 0.5);
	border-radius: 4px;
	padding: 2px 6px 2px 6px;
	
	}
div.code div {
}
div.code {
	background: #1b1b1b!important;
	margin: 10px 10px 10px auto;
	padding: 10px;
	border-radius: 0.6rem;
	
}

.CodeMirror {
	height: auto!important;
}

.cm-s-ayu-dark.CodeMirror { background: #1b1b1b!important}
.cm-s-ayu-dark .CodeMirror-gutters { background: #1b1b1b!important; border-right: 0px; }

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: 1.5;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
}

div.CodeMirror pre, div.CodeMirror-linenumber, code {
    line-height: 1.5;
		
}

JavaScript

CodeMirror.fromTextArea(document.getElementById('asdf'), {
 	name: "htmlmixed",
	mode: 'htmlmixed',
	theme: 'ayu-mirage',
	lineNumbers: true
});