CodeMirror基本使用及实现关键词高亮、自定义主题

CodeMirror是一款在线的支持语法高亮的代码编辑器,现在已有封装的react版本(react-codemirror)可以直接使用。Codemirror资源文件中,lib下是放的是核心库和核心cssmode下放的是各种支持语言的语法定义,theme目录下是支持的主题样式。

使用codemirror实现在线代码编辑器主要包括的功能是:

1、实现自动提示

2、 关键词高亮与自定义theme

下面是codemirror的使用介绍(以react-codemirror的使用为例):

导入核心库和核心css:

import CodeMirror from 'react-codemirror';
import 'codemirror/lib/codemirror.css';

 

导入使用的语言语法定义文件:

 

import 'codemirror/mode/sql/sql';

 

导入自动提示核心文件及样式:

 

import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';

 

导入指定语言的提示文件:

 

import 'codemirror/addon/hint/sql-hint.js';

导入选中的theme文件:

 

 

import 'codemirror/theme/blackboard.css';

定义基本options:

 

 

const options={
  lineNumbers: true,                     //显示行号
  mode: {name: "text/x-mysql"},          //定义mode
  extraKeys: {"Ctrl": "autocomplete"},   //自动提示配置
  theme: "blackboard"                  //选中的theme
};

render:

 

 

return (
    <div>
        <CodeMirror ref="editor" value={this.state.sqlValue} onChange={code => this.setState({sqlText: sqlValue})} options={options} />
    </div>
);

 

当需要获取CodeMirror对象并进行一些操作时:

 

const editor = this.refs.editor.getCodeMirror();
console.log(editor.getSelection());   //获取选中内容
editor.setValue(sql);                      //设置新的value值

 

以上就基于react-codemirror实现了自动提示和关键词高亮的功能。Options详细配置项及apihttp://codemirror.net/

theme文件夹下提供了近50theme可供选择,FarhadG实现了很多额外的theme,见https://github.com/FarhadG/code-mirror-themes,各theme的实现效果见http://farhadg.github.io/code-mirror-themes/

我们还可以根据自己的需求自定义theme,介绍两种方法:

1、   FarhadG提供了工具codeMirror-aceEditor-theme-generator,我们可以在http://tmtheme-editor.herokuapp.com进行theme的设计,并下载为xml文件,使用codeMirror-aceEditor-theme-generator将其转换为自定义的theme文件;

theme其实就是样式文件,实现高亮的原理是根据不同语言的语法定义设置不同的类名,theme就是定义各种类的样式,可以自己实现theme样式文件,import至项目中,就可以在options中使用对应theme。举例如下(sqlThem.css):

 

/*选中区域*/
.cm-s-sqlTheme .CodeMirror-activeline-background {  background: #D7D4F0;  }
.cm-s-sqlTheme .CodeMirror-selected {background: #D7D4F0;}
.cm-s-sqlTheme .CodeMirror-linenumber { color: #AEAEAE; }  /*行号数字*/ 
.cm-s-sqlTheme .cm-quote {color: #090;}           /*引号*/
.cm-s-sqlTheme .cm-keyword {color: #3300CC;}      /*关键字,例如:SELECT*/
.cm-s-sqlTheme .cm-number {color: #333333;}        /*数字*/
.cm-s-sqlTheme .cm-variable-2 {color: #333333;}   /*变量2,例如:a.id中的.id*/
.cm-s-sqlTheme .cm-comment {color: #009933;}  /*注释*/
.cm-s-sqlTheme .cm-string {color: #009933;}     /*字符串*/
.cm-s-sqlTheme .cm-string-2 {color: #009933;}   /*字符串*/

 

需要注意的是:

1、codemirror.css文件中定义了组件的样式(比如行号,背景、前景颜色,光标等样式),若需更改可在自定义的样式文件中覆盖; codemirror.css文件还实现了default的theme(见cm-s-default),供参考。

2、cm-s-themeName中的themeName必须与css文件名和theme名一致。

3、选择不同的语言(如Java、js、sql)对应的theme文件中使用的类存在不同,在实际使用中根据选择的语言进行配置就可以,不将完整的类名列表全部定义样式。
 




 

 

 

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CodeMirror 是一个用于在网页上实现代码编辑器的 JavaScript 库。它提供了丰富的功能,包括代码高亮。要在 CodeMirror实现代码高亮,你可以按照以下步骤进行操作: 1. 首先,你需要从 CodeMirror 的官方网站(https://codemirror.net)下载最新版本的 CodeMirror 库,并将其包含在你的网页中。 2. 在 HTML 文件的 `<head>` 部分,添加以下样式和脚本标签来引入 CodeMirror 的样式和脚本文件: ```html <link rel="stylesheet" href="path/to/codemirror.css"> <script src="path/to/codemirror.js"></script> <script src="path/to/mode/javascript/javascript.js"></script> <!-- 如果你要高亮其他编程语言的代码,请引入相应的模式文件 --> ``` 3. 在 HTML 文件中创建一个 `<textarea>` 元素,作为 CodeMirror 编辑器的容器。例如: ```html <textarea id="myCode"></textarea> ``` 4. 在 JavaScript 文件中,初始化 CodeMirror 编辑器并为其添加相应的选项和模式。例如: ```javascript var editor = CodeMirror.fromTextArea(document.getElementById("myCode"), { lineNumbers: true, // 显示行号 mode: "javascript" // 代码语言模式 }); ``` 5. 最后,将 CodeMirror 编辑器的容器适应到所需的大小。例如: ```javascript editor.setSize("100%", "400px"); ``` 现在,你已经成功实现了一个具有代码高亮功能的 CodeMirror 编辑器。你可以根据需要自定义各种选项和样式,以满足你的需求。 请注意,上述示例中使用的是 JavaScript 代码语言模式。如果你要高亮其他编程语言的代码,你需要引入相应的模式文件,并在初始化 CodeMirror 编辑器时指定相应的模式。 希望以上信息能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值