better-staridc-MNBT
1<!doctype html>
2
3<title>CodeMirror: Selection Marking Demo</title>
4<meta charset="utf-8"/>
5<link rel=stylesheet href="../doc/docs.css">
6
7<link rel="stylesheet" href="../lib/codemirror.css">
8<script src="../lib/codemirror.js"></script>
9<script src="../addon/search/searchcursor.js"></script>
10<script src="../addon/selection/mark-selection.js"></script>
11<style>
12 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
13 .CodeMirror-selected { background-color: blue !important; }
14 .CodeMirror-selectedtext { color: white; }
15 .styled-background { background-color: #ff7; }
16 </style>
17<div id=nav>
18 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
19
20 <ul>
21 <li><a href="../index.html">Home</a>
22 <li><a href="../doc/manual.html">Manual</a>
23 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
24 </ul>
25 <ul>
26 <li><a class=active href="#">Selection Marking</a>
27 </ul>
28</div>
29
30<article>
31<h2>Selection Marking Demo</h2>
32<form><textarea id="code" name="code">
33Select something from here. You'll see that the selection's foreground
34color changes to white! Since, by default, CodeMirror only puts an
35independent "marker" layer behind the text, you'll need something like
36this to change its colour.
37
38Also notice that turning this addon on (with the default style) allows
39you to safely give text a background color without screwing up the
40visibility of the selection.</textarea></form>
41
42 <script>
43var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
44 lineNumbers: true,
45 styleSelectedText: true
46});
47editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
48</script>
49
50 <p>Simple addon to easily mark (and style) selected text. <a href="../doc/manual.html#addon_mark-selection">Docs</a>.</p>
51
52 </article>