一个简单的基于codemirror的在线代码高亮编辑器

注意：！！！！
codeMirror官网下的可能不能用，我就在这个地方栽了好几次才发现。下载
这里做的单页面的编辑器。
codemirror好处就是可以实时编辑，有用过highlight框架，但是一实时编辑，高亮效果就会失效，适合展示不适合编辑。

引用

引入codemirror·

<link rel="stylesheet" type="text/css"
          href="./libs/CodeMirror-2.25/lib/codemirror.css" />
<script type="text/javascript"
            src="./libs/CodeMirror-2.25/lib/codemirror.js"></script>

代码样式

<link rel="stylesheet" type="text/css"
          href="./libs/CodeMirror-2.25/theme/night.css" />

需要代码高亮的语言

<script type="text/javascript"
            src="./libs/CodeMirror-2.25/lib/codemirror.js"></script>
    <script type="text/javascript" src="./libs/CodeMirror-2.25/mode/xml/xml.js"></script>
    <script type="text/javascript"
            src="./libs/CodeMirror-2.25/mode/htmlmixed/htmlmixed.js"></script>
    <script type="text/javascript"
            src="./libs/CodeMirror-2.25/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="./libs/CodeMirror-2.25/mode/css/css.js"></script>

html中使用

 <textarea autocomplete="off" cols="30" rows="4" id="cssCode" name="cssCode" style="min-height: 96px; height: 96px;"></textarea>

对应js

初始化

var editCss = CodeMirror.fromTextArea(document.getElementById("cssCode"), {
    mode: "css",
    selectionPointer: true,
    lineNumbers: false,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true
});
var editHtml = CodeMirror.fromTextArea(document.getElementById("htmlCode"), {
    mode: "htmlmixed",
    selectionPointer: true,
    lineNumbers: false,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true
});
var editJs = CodeMirror.fromTextArea(document.getElementById("jsCode"), {
    mode: "javascript",
    selectionPointer: true,
    lineNumbers: false,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true
});

点击运行

 var code = {
        css: '',
        html: '',
        js: '',
    };
    function run() {
        code = {
            css: editCss.getValue(),
            html: editHtml.getValue(),
            js: editJs.getValue(),
        };
        // js
        let script = document.getElementById('sss');	//新标签<script id="sss"></script>来存储
        script.innerText = code.js;

        //css
        let style = document.getElementsByTagName('style');
        style[0].appendChild(document.createTextNode(code.css));

        //html
        let hscript = document.getElementById('app');	//需要展示的位置，如此处app为效果中按钮所在盒子
        hscript.innerHTML = code.html;
    }

效果