matchhighlighter.html (4838B)
1 <!doctype html> 2 3 <title>CodeMirror: Match Highlighter 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/scroll/annotatescrollbar.js"></script> 10 <script src="../addon/search/matchesonscrollbar.js"></script> 11 <script src="../addon/search/searchcursor.js"></script> 12 <script src="../addon/search/match-highlighter.js"></script> 13 <style type="text/css"> 14 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} 15 .CodeMirror-focused .cm-matchhighlight { 16 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); 17 background-position: bottom; 18 background-repeat: repeat-x; 19 } 20 .cm-matchhighlight {background-color: lightgreen} 21 .CodeMirror-selection-highlight-scrollbar {background-color: green} 22 </style> 23 <div id=nav> 24 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 25 26 <ul> 27 <li><a href="../index.html">Home</a> 28 <li><a href="../doc/manual.html">Manual</a> 29 <li><a href="https://github.com/codemirror/codemirror">Code</a> 30 </ul> 31 <ul> 32 <li><a class=active href="#">Match Highlighter</a> 33 </ul> 34 </div> 35 36 <article> 37 <h2>Match Highlighter Demo</h2> 38 <form><textarea id="code" name="code">Select this text: hardtospot 39 And everywhere else in your code where hardtospot appears will 40 automatically illuminate. Give it a try! No more hard to spot 41 variables - stay in context of your code all the time. 42 43 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra 44 interdum dui eu pulvinar. Mauris maximus ligula venenatis tempus 45 interdum. Cras hendrerit, ipsum sed ultrices pharetra, ligula diam 46 porttitor lacus, ac tempor eros est a massa. Nam orci elit, vulputate 47 in tristique quis, consectetur vitae metus. Pellentesque et enim 48 elementum, lobortis augue in, lacinia sapien. Morbi eu nunc semper, 49 sagittis felis a, pellentesque mauris. Lorem ipsum dolor sit amet, 50 consectetur adipiscing elit. Aenean quis diam turpis. 51 52 Fusce lobortis nisl quis aliquet euismod. Aenean vitae nulla non ipsum 53 efficitur scelerisque. Curabitur auctor, lorem non rhoncus porttitor, 54 augue ligula lacinia dolor, et vehicula magna lorem imperdiet velit. 55 Fusce risus sem, hardtospot commodo eleifend hendrerit vitae, mollis 56 quis risus. Cras tincidunt, justo vitae hendrerit venenatis, urna 57 dolor placerat tortor, eu lobortis lectus dolor in ligula. Nullam non 58 erat non nisl vulputate ultrices sit amet vestibulum dolor. Quisque in 59 tortor porta, pellentesque odio nec, malesuada nibh. 60 61 In a dui feugiat, ullamcorper urna in, accumsan magna. Donec egestas 62 sem nec eros rhoncus, vel gravida purus ornare. Nulla orci mauris, 63 porta nec pharetra sed, ornare et lorem. Donec luctus turpis nunc, 64 eget dictum felis mollis et. Sed sodales hardtospot nunc vitae leo 65 rhoncus imperdiet. Donec elementum malesuada velit quis placerat. 66 Proin accumsan lorem id nisi volutpat ullamcorper. Vivamus laoreet 67 dolor ac sem malesuada, ac scelerisque ex efficitur. Aliquam tempus 68 libero velit, vel tristique augue vulputate nec. 69 70 Mauris ultrices leo felis, sit amet congue augue aliquam condimentum. 71 Vivamus purus leo, mattis vitae dignissim vel, ultricies ac ex. Mauris 72 eu dolor eu purus ultricies ultrices. Sed euismod feugiat ex et 73 mattis. Morbi cursus laoreet pharetra. Donec eu dolor sodales, 74 ultricies nisi et, malesuada urna. Praesent sit amet fringilla felis. 75 Nam rhoncus, est blandit auctor auctor, lorem ipsum laoreet ipsum, 76 quis sodales libero odio in lorem. Phasellus odio dolor, elementum 77 sagittis nibh non, fermentum semper libero. Mauris hendrerit 78 hardtospot lectus sit amet commodo eleifend. Morbi pulvinar eget nisl 79 at eleifend. Fusce eget porta erat, vitae lobortis libero. 80 81 Phasellus sit amet massa in massa pharetra malesuada. Vestibulum at 82 quam vel libero aliquam volutpat at ut dui. Praesent scelerisque vel 83 mauris sit amet vehicula. Phasellus at mi nec ligula cursus interdum 84 sit amet non quam. Aliquam tempus sollicitudin euismod. Nulla euismod 85 mollis enim tincidunt placerat. Proin ac scelerisque enim, quis 86 sollicitudin metus. Pellentesque congue nec sapien ut rhoncus. Sed 87 eget ornare diam, ut consectetur ante. Aenean eleifend mauris quis 88 ornare accumsan. In hac habitasse hardtospot platea dictumst. 89 90 </textarea></form> 91 92 <script> 93 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 94 lineNumbers: true, 95 // To highlight on scrollbars as well, pass annotateScrollbar in options 96 // as below. 97 highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true} 98 }); 99 </script> 100 101 <p>Search and highlight occurences of the selected text.</p> 102 103 </article>