codemirror的使用方法,给自己的页面加个代码编辑器

最近在做一个小项目,要实现编辑器代码上色效果,发现Codemirror这款插件还不错,此插件支持非常多的代码类型,具体可进入官网查看codemirror官网GitHub项目地址,话不多说直接上使用方法!♥

第一步,引入外部css/js文件
<link href="https://cdn.bootcss.com/codemirror/5.47.0/codemirror.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/codemirror/5.47.0/addon/display/fullscreen.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/codemirror/5.47.0/theme/gruvbox-dark.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/codemirror/5.47.0/codemirror.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/mode/xml/xml.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/mode/css/css.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/addon/selection/active-line.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.47.0/addon/display/fullscreen.js"></script>

第二步,创建html代码:

<textarea name="code" id="code">代码自动上色</textarea>

第三步,js代码设置属性:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    indentUnit: 4,
    styleActiveLine: true,
    matchBrackets: true,
    mode: 'htmlmixed',  //代码类型设置
    lineWrapping: true,
    theme: 'gruvbox-dark', //主题设置
});
editor.setOption("extraKeys", {
    Tab: function(cm) {
        var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
        cm.replaceSelection(spaces);
    },
    "F11": function(cm) {
        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
    },
    "Esc": function(cm) {
        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
    }
});
以上代码只集合了html/css/js/xml渲染,若需要其他可自行设置!

效果图如下:

codemirror的使用方法,给自己的页面加个代码编辑器  技术教程 经验教程 第1张

教程到此结束!


codemirror的使用方法,给自己的页面加个代码编辑器  技术教程 经验教程 第2张

感谢您的支持,我会继续努力的!

codemirror的使用方法,给自己的页面加个代码编辑器  技术教程 经验教程 第3张
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

标签: 技术教程 经验教程

作者头像
便宜技术博客创始人

乐享资源记忆点滴的博客,主要分享程序源码!

  • 我是一个热爱钻研计算机技术的青少年,从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队,希望能和大家合作,一同创造出属于我们自己的作品!
  • 版权声明:本站文章如无特别标注,均为本站原创文章,于2019-06-29,由便宜技术博客发表,共 3238个字。
  • 转载请注明出处:便宜技术博客,如有疑问,请联系我们
  • 本文地址:https://www.aswpay.cn/bbs/?id=26
上一篇:介绍一个好用主机睛天云IDC主机
下一篇:怎样做好外链优化

发表评论