to-be-integrated/third-party/codemirror-3.15/demo/markselection.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Match Highlighter Demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/search/searchcursor.js"></script>
   9     <script src="../addon/selection/mark-selection.js"></script>
  10     <link rel="stylesheet" href="../doc/docs.css">
  11
  12     <style type="text/css">
  13       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  14       .CodeMirror-selected  { background-color: blue !important; }
  15       .CodeMirror-selectedtext { color: white; }
  16     </style>
  17   </head>
  18   <body>
  19     <h1>CodeMirror: Mark Selection Demo</h1>
  20
  21     <form><textarea id="code" name="code">Select something from here.
  22 You'll see that the selection's foreground color changes to white!
  23 Since, by default, CodeMirror only puts an independent "marker" layer
  24 behind the text, you'll need something like this to change its colour.</textarea></form>
  25
  26     <script>
  27 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  28   lineNumbers: true,
  29   styleSelectedText: true
  30 });
  31 </script>
  32
  33     <p>Simple addon to easily mark (and style) selected text.</p>
  34
  35   </body>
  36 </html>