CodeMirror : Highlight Editor Dark Mode

Show Code


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/theme/material-darker.min.css">
    
    <style>
     .CodeMirror {
            height: auto;
            min-height: 300px;
            border: 1px solid #30363d;
            font-size: 16px;
        }
        .editor-wrapper {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px;
        }
</style>
    <div class="editor-wrapper">
        <textarea class="editor"></textarea>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/htmlmixed/htmlmixed.min.js"></script>

    <script>
        var editor = CodeMirror.fromTextArea(document.querySelector('.editor'), {
            lineNumbers: true,                       mode: 'htmlmixed',                       theme: 'material-darker',               tabSize: 2,                             indentUnit: 2,                           matchBrackets: true,
            lineWrapping: true
        });
    </script>