• 【CodeMirror】在线代码编辑器的基础库


    CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库

    1.第一步安装                            

    npm install vue-codemirror --save
    

    2.在main中引入

    import VueCodemirror from 'vue-codemirror'
    Vue.use(VueCodemirror);
    

    3.引入后在html界面中建立textarea标签,用于生成代码框

    <textarea class="form-control" id="codes" name="code"></textarea>

     4.根据textarea的id获取到标签元素,将容器转换为编辑器

    this.editor = CodeMirror.fromTextArea(document.getElementById('codes'), {
      mode:"python",// 语言模式
      theme:"leetcode",// 主题
      keyMap:"sublime",// 快键键风格
      lineNumbers:true,// 显示行号
      smartIndent: true , //智能缩进
      indentUnit: 4, // 智能缩进单位为4个空格长度
      indentWithTabs:true,  // 使用制表符进行智能缩进
      lineWrapping:true,//
      // 在行槽中添加行号显示器、折叠器、语法检测器`
      gutters: ["CodeMirror-linenumbers","CodeMirror-foldgutter","CodeMirror-lint-markers"],
      foldGutter:true, // 启用行槽中的代码折叠
      autofocus:true,  / /自动聚焦
      matchBrackets:true,// 匹配结束符号,比如"]、}"
      autoCloseBrackets: true , // 自动闭合符号
      styleActiveLine:true, // 显示选中行的样式
    });
    

    5.初始化编译器时可设置属性:

    value:初始内容
    Mode:设置编译器编程语言关联内容,对应的mine值
    Theme:编译器的主题,需要引入对应的包
    tabSize:tab的空格宽度
    lineNumbers:是否使用行号
    smartIndent:自动缩进是否开启
    indentUnit:缩进单位
    keyMap:快捷键,default使用默认快捷键,除此之外包括emacs,sublime,vim快捷键,使用需引入工具
    

      

    注释:

    参考文章:https://www.niwoxuexi.com/blog/xiaozhu/article/1228

    参考文章:https://www.jianshu.com/p/52683780c76e

  • 相关阅读:
    开始熟悉一下数据结构了
    首个概率dp
    十六进制转化为八进制
    蓝桥之 剪格子
    蓝桥之 颠倒的价格
    还是闲的
    也是闲的
    闲的无聊,,,
    函数进阶
    函数基础
  • 原文地址:https://www.cnblogs.com/whblogs/p/14452364.html
Copyright © 2020-2023  润新知