activeline.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CodeMirror 2: Active Line Demo</title>
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <script src="../lib/codemirror.js"></script>
  7. <link rel="stylesheet" href="../theme/default.css">
  8. <script src="../mode/xml/xml.js"></script>
  9. <link rel="stylesheet" href="../css/docs.css">
  10. <style type="text/css">
  11. .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  12. .activeline {background: #f0fcff !important;}
  13. </style>
  14. </head>
  15. <body>
  16. <h1>CodeMirror 2: Active Line Demo</h1>
  17. <form><textarea id="code" name="code">
  18. <?xml version="1.0" encoding="UTF-8"?>
  19. <rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
  20. xmlns:georss="http://www.georss.org/georss"
  21. xmlns:twitter="http://api.twitter.com">
  22. <channel>
  23. <title>Twitter / codemirror</title>
  24. <link>http://twitter.com/codemirror</link>
  25. <atom:link type="application/rss+xml"
  26. href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
  27. <description>Twitter updates from CodeMirror / codemirror.</description>
  28. <language>en-us</language>
  29. <ttl>40</ttl>
  30. <item>
  31. <title>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This one
  32. uses CodeMirror as its editor.</title>
  33. <description>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This
  34. one uses CodeMirror as its editor.</description>
  35. <pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
  36. <guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
  37. <link>http://twitter.com/codemirror/statuses/48527733722058752</link>
  38. <twitter:source>web</twitter:source>
  39. <twitter:place/>
  40. </item>
  41. <item>
  42. <title>codemirror: Posted a description of the CodeMirror 2 internals at
  43. http://codemirror.net/2/internals.html</title>
  44. <description>codemirror: Posted a description of the CodeMirror 2 internals at
  45. http://codemirror.net/2/internals.html</description>
  46. <pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
  47. <guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
  48. <link>http://twitter.com/codemirror/statuses/42920879788789760</link>
  49. <twitter:source>web</twitter:source>
  50. <twitter:place/>
  51. </item>
  52. </channel>
  53. </rss></textarea></form>
  54. <script>
  55. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  56. mode: "application/xml",
  57. lineNumbers: true,
  58. onCursorActivity: function() {
  59. editor.setLineClass(hlLine, null);
  60. hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
  61. }
  62. });
  63. var hlLine = editor.setLineClass(0, "activeline");
  64. </script>
  65. <p>Styling the current cursor line.</p>
  66. </body>
  67. </html>