varnicas
/
TEMPEST_WASM_Frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4 Commits
1 Branch
0 Tags
3.9 MiB
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
TEMPEST_WASM_Frontend/codemirror-5.65.16/demo/matchhighlighter.html

103 lines
4.7 KiB
Raw Permalink Normal View History

Updated version
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!doctype html>
  3. <title>CodeMirror: Match Highlighter Demo</title>
  4. <meta charset="utf-8"/>
  5. <link rel=stylesheet href="../doc/docs.css">
  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>
  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="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
  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/codemirror5">Code</a>
  30. </ul>
  31. <ul>
  32. <li><a class=active href="#">Match Highlighter</a>
  33. </ul>
  34. </div>
  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.
  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.
  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.
  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.
  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.
  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.
  90. </textarea></form>
  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>
  101. <p>Search and highlight occurrences of the selected text.</p>
  103. </article>