CodeMirror Playground

by 亮 薛

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="editor"></div>

CSS

body, html {
    padding: 15px;
}

#editor {
    border: 1px solid #DDD
}

.marked-text {
    /* background: red;     */
}

JavaScript

var cm = CodeMirror(document.getElementById("editor"), {
    value: "function myScript() {\n    return 100;\n}",
    mode: "javascript",
    indentUnit: 4,
    lineNumbers: true
});