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),可以修改代码字体的大小和行高。
上面的方法很笨,但是可以凑活用~