美文网首页VueVue组件
Codemirror简单配置

Codemirror简单配置

作者: Dianaou | 来源:发表于2018-10-29 14:53 被阅读2481次

    codemirror是一个代码编译器,vue、react都有相应的codemirror,目录及用法都是一样的,也比较容易上手,vue中配置还是相应的比较简单,主要可以实现匹配括号,以及代码折叠的效果,vue配置信息:

    cmOptions: {

              tabSize: 4,

              mode: { name: 'javascript', json: true },

              theme:"eclipse",

              styleActiveLine: true,

              lineNumbers: true,

              line: true,

              foldgutter: true,

              gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],

              lineWrapping: true, //代码折叠

                foldGutter: true,

                matchBrackets: true,  //括号匹配

                autoCloseBrackets: true

            }

    以上的配置引了以下的包:

    import { codemirror } from 'vue-codemirror'

    import 'codemirror/mode/javascript/javascript.js'

    import 'codemirror/lib/codemirror.css'

    import 'codemirror/theme/eclipse.css';

    import "codemirror/addon/fold/foldgutter.css"

    import 'codemirror/addon/fold/foldcode.js';

    import 'codemirror/addon/fold/foldgutter.js';

    import 'codemirror/addon/fold/xml-fold.js';

    import 'codemirror/addon/fold/indent-fold.js';

    import "codemirror/addon/fold/brace-fold";

    import 'codemirror/addon/fold/markdown-fold.js';

    import 'codemirror/addon/fold/comment-fold.js';

    import 'codemirror/addon/selection/active-line';

    import 'codemirror/addon/edit/closeBrackets';

    import 'codemirror/addon/edit/matchBrackets';

    codemirror目录的功能:


    配置信息 以上配置引的包

    相关文章

      网友评论

        本文标题:Codemirror简单配置

        本文链接:https://www.haomeiwen.com/subject/tsubtqtx.html