I need to change the background color of the selected text using codemirror. Can anyone help?
The above answer is missing the essential !important. You need:
.CodeMirror-selected {background-color: #CCCCCC !important;}
If you need to also change the selection foreground color, CodeMirror has the mark-selection.js addon to achieve that.
Change the background color for .CodeMirror-selected {} , the class is located in codemirror.css
.CodeMirror-selected {background:#CCCCCC;}
I was able to solve this by overriding the highlight color specific to the CodeMirror theme:
/** OVERRIDE SELECTED TEXT HIGHLIGHT COLOR FOR THEMES: **/
/* isotope theme */
.cm-s-isotope div.CodeMirror-selected {
background: #0004FF !important;
}
/* colorforth theme */
.cm-s-colorforth div.CodeMirror-selected {
background: #0004FF !important;
}
/* 3024-night theme */
.cm-s-3024-night div.CodeMirror-selected {
background: #0004FF !important;
}
/** - - - - - **/
This solution applies to the AngularJS version of CodeMirror.
You need to import mark-selection add on and set the custom background-color.
- import 'codemirror/addon/selection/mark-selection';
- In case you need to reset the background color to default browser behavior then add this to your style
background-color: highlight;
I believe this is a CSS concern. Please refer to the following article:
-
2Codemirror uses it's own implementation of selection, hence this method doesn't work. Jun 24, 2014 at 9:10