Codemirror Selection Marking Demo

.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror-selected { background-color: blue !important; } .CodeMirror-selectedtext { color: white; } .styled-background { background-color: #ff7; }

CodeMirror

Home Manual Code

Selection Marking

Selection Marking Demo

Select something from here. You'll see that the selection's foreground color changes to white! Since, by default, CodeMirror only puts an independent "marker" layer behind the text, you'll need something like this to change its colour.

Also notice that turning this addon on (with the default style) allows you to safely give text a background color without screwing up the visibility of the selection.

var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, styleSelectedText: true }); editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});

Simple addon to easily mark (and style) selected text. Docs .