javascript - React-Codemirror match-highlighter 插件不突出显示文本
问题描述
我正在使用 react-codemirror 并希望在 Codemirror 中突出显示文本“ Hello ”,但 match-highlighter 插件没有突出显示相同的内容。下面是相同的代码。
import React, { Component } from 'react';
import { render } from 'react-dom';
import CodeMirror from 'react-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/search/match-highlighter';
import 'codemirror/mode/javascript/javascript';
class App extends Component {
constructor() {
super();
this.state = {
name: 'CodeMirror',
code: '//Test Codemirror'
};
}
updateCode(newCode) {
this.setState({
code: newCode,
});
}
render() {
let options = {
lineNumbers: true,
mode: 'javascript',
highlightSelectionMatches: {
minChars: 2,
showToken: /Hello/,
style:'matchhighlight'
},
styleActiveLine: true,
styleActiveSelected: true,
};
return (
<div>
<CodeMirror value={this.state.code} onChange={this.updateCode.bind(this)} options={options}/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
当前输出在下面的屏幕截图中,该单词未突出显示。
解决方案
我找到了解决这个问题的方法。为了启用突出显示,需要添加一个与样式属性对应的 css。我在css文件中添加了以下代码并开始工作
.cm-matchhighlight {
background: red !important
}
现在它正确突出了令牌
推荐阅读
- tibco - 使用 Tibco EMS 在 Teradata 中执行查询或宏
- java - 如何根据方法参数做case语句?
- reactjs - Delete an object inside of array with firestore
- c# - MVC 身份验证用户名和密码以及自定义属性
- javascript - 如何使用 vue js 获取元素?
- javascript - 动态表单在 Angular 7 中不起作用
- php - 密码重置令牌存储 - 值应该被散列吗?
- python-3.x - ValueError:请求 url Scrapy 中缺少方案
- amazon-web-services - 我可以给我的客户一个 AWS 存储桶链接,他们可以去那里上传文件吗?
- wordpress - 无法在 WordPress 的表中插入值