[英]React-Codemirror match-highlighter addon not highlighting the text
I am using react-codemirror and want to highlight the text ' Hello ' in the Codemirror but the match-highlighter addon is not highlighting the same.我正在使用 react-codemirror 并希望在 Codemirror 中突出显示文本“ Hello ”,但 match-highlighter 插件没有突出显示相同的内容。 Below is the code for the same.
下面是相同的代码。
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'));
Current output is in the screenshot below and the word is not highlighted.当前的 output 在下面的屏幕截图中,单词没有突出显示。
I found a solution for this issue.我找到了解决这个问题的方法。 Inorder to enable the highlighting one need to add a css corresponding to the style property.
为了启用突出显示需要添加一个与样式属性对应的 css。 I added the below code in css file and it started working
我在 css 文件中添加了以下代码,它开始工作
.cm-matchhighlight {
background: red !important
}
Now it highlights the token properly现在它正确突出了令牌
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.