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

    CodeMirror 是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并带有 实现更高级编辑功能的多种语言模式和附加组件。    丰富的编程API和CSS 主题系统可用于自定义 CodeMirror 以适合您的应用程序,并使用新功能对其进行扩展。官方网址:https://codemirror.net/  &nb

预览截图

应用介绍

    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>




点赞(0) 打赏

立即下载

Comment list 共有 0 条评论

暂无评论