CodeMirror 的简单配置

版权声明：本文为博主原创文章，转载请注明出处，谢谢 https://blog.csdn.net/LLittleF/article/details/77971299

CodeMirror 的简单配置

最近有个小项目需要用到在线代码编辑的功能，于是就找到了CodeMirror。虽然功能很强大，但是初次使用的话配置起来还真是无从下手（才不是英语不好）。下面记录一下简单的配置过程。

首先需要引入的文件有：

 - lib/codemirror.css
 - lib/codemirror.js

然后根据情况引入下面的文件：

- theme目录下的任意一个主题(可以不引入)
- 去mode目录下选择高亮模式。（比如要编辑器支持JavaScript高亮就引入mode的JavaScript文件夹下的文件）

准备工作完成，然后开始写代码。

在html中准备一个textarea并指定id
<textarea id = "code"></textarea>
在js代码中初始化codemirror

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
                mode:"text/x-c",    //选择c模式
                lineNumbers:true,   //显示行号
                theme:"seti",       //选择主题,没引入主题的话可以不写
                matchBrackets:true, //括号匹配
  });

以上是常用的几个参数，更多的参数可以去官网上查看。

默认的编辑器行高和字体都很小，看着可能有点不舒服，网上找了好久也没有关于怎么改行高和字体的，于是就直接修改css文件了：

- codemirror.css中在第31行的.CodeMirror-linenumber类中直接加入font-size属性可以更改行号的字体
- 还是上面那个文件，第234行的.CodeMirror pre中修改font-size和line-height属性（默认为inherit），可以修改代码字体的大小和行高。

上面的方法很笨，但是可以凑活用~