Add example of using markselection to style background to demo

Author: marijnh

demo/markselection.html

@@ -12,6 +12,7 @@
       .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; }
     </style>
 <div id=nav>
   <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
@@ -28,16 +29,22 @@
 
 <article>
 <h2>Selection Marking Demo</h2>
-<form><textarea id="code" name="code">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.</textarea></form>
+<form><textarea id="code" name="code">
+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.</textarea></form>
 
     <script>
 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
   lineNumbers: true,
   styleSelectedText: true
 });
+editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
 </script>
 
     <p>Simple addon to easily mark (and style) selected text.</p>

lib/codemirror.css

@@ -57,6 +57,10 @@
   border: 0;
   background: #7e7;
 }
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
 .cm-animate-fat-cursor {
   width: auto;
   border: 0;
@@ -273,7 +277,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
-  z-index: 1;
+  z-index: 3;
 }
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
@@ -300,3 +304,6 @@ div.CodeMirror-cursors {
     visibility: hidden;
   }
 }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }