CodeMirror,在线代码编辑器,HTML代码编辑器,可嵌入代码编辑器,

    CodeMirror 是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并带有 实现更高级编辑功能的多种语言模式和附加组件。

    丰富的编程API和CSS 主题系统可用于自定义 CodeMirror 以适合您的应用程序，并使用新功能对其进行扩展。

官方网址：https://codemirror.net/   

使用BootCDN引入依赖：https://www.bootcdn.cn/codemirror/5.57.0/   

如下图：

案例代码：

<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/codemirror.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/codemirror.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/mode/xml/xml.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/mode/css/css.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.56.0/addon/edit/matchbrackets.js"></script>
<script>
    let cm_params = {
        mode: "text/html", //实现html代码高亮
        lineNumbers: true,	//显示行号
        // theme: "dracula",	//设置主题
        // lineWrapping: true,	//代码折叠
        // foldGutter: true,
        // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets: true,	//括号匹配
        //readOnly: true,        //只读
    };
    let editor = CodeMirror.fromTextArea(document.getElementById("c-content"), cm_params);
</script>