CodeMirror 的简单配置

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),可以修改代码字体的大小和行高。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值