CodeMirror 的简单配置
来源:互联网 发布:硬盘修复软件 编辑:程序博客网 时间:2024/06/14 22:10
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),可以修改代码字体的大小和行高。
上面的方法很笨,但是可以凑活用~
阅读全文
0 0
- CodeMirror 的简单配置
- codeMirror事件的简单应用
- codeMirror配置
- CodeMirror简单使用
- CODEMIRROR 配置说明
- 用codemirror实现一个自己的简单hive ql编辑器
- CodeMirror的认识和使用
- 在线代码编辑器 CODEMIRROR 配置说明
- 在线代码编辑器 CODEMIRROR 配置说明
- 基于codeMirror的实时在线编辑器
- CodeMirror插件的高度自适应问题
- 文本域的CodeMirror编辑器的自动联想功能
- 华丽丽的在线代码高亮组件CodeMirror
- 基于CodeMirror&TernJS的汉语Javascript编辑器(和翻译器)
- CodeMirror实现MySql关键字的变色和自动提示
- 关于CodeMirror组件间互相影响的缺陷问题
- 网页代码编辑器的两个插件: ACE 和 CodeMirror
- 使用 CodeMirror 打造属于自己的在线代码编辑器
- qt5.9-vs2015 编译qwt6.30 遇到的问题
- Linux的进程,线程以及调度(fork与僵尸,内存泄漏,task结构体,停止状态与作业控制)
- Pandas 使用教程 2
- C++中的const
- 正则表达式pattern内部\\\\用法
- CodeMirror 的简单配置
- bzoj1468 Tree 点分治
- CentOS 7 下安装mosquitto
- Nginx常用集群以及解决TomcatSession问题
- keil工程无法调试
- rotate-image
- AngularJS 学习笔记(4)-过滤器,$location
- ArcEngine创建要素类_线图层
- 项目1-C++语言中函数参数传递的三种方式