theme.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!doctype html>
  2. <title>CodeMirror: Theme Demo</title>
  3. <meta charset="utf-8"/>
  4. <link rel=stylesheet href="../doc/docs.css">
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <link rel="stylesheet" href="../theme/3024-day.css">
  7. <link rel="stylesheet" href="../theme/3024-night.css">
  8. <link rel="stylesheet" href="../theme/ambiance.css">
  9. <link rel="stylesheet" href="../theme/base16-dark.css">
  10. <link rel="stylesheet" href="../theme/base16-light.css">
  11. <link rel="stylesheet" href="../theme/blackboard.css">
  12. <link rel="stylesheet" href="../theme/cobalt.css">
  13. <link rel="stylesheet" href="../theme/eclipse.css">
  14. <link rel="stylesheet" href="../theme/elegant.css">
  15. <link rel="stylesheet" href="../theme/erlang-dark.css">
  16. <link rel="stylesheet" href="../theme/lesser-dark.css">
  17. <link rel="stylesheet" href="../theme/mbo.css">
  18. <link rel="stylesheet" href="../theme/mdn-like.css">
  19. <link rel="stylesheet" href="../theme/midnight.css">
  20. <link rel="stylesheet" href="../theme/monokai.css">
  21. <link rel="stylesheet" href="../theme/neat.css">
  22. <link rel="stylesheet" href="../theme/neo.css">
  23. <link rel="stylesheet" href="../theme/night.css">
  24. <link rel="stylesheet" href="../theme/paraiso-dark.css">
  25. <link rel="stylesheet" href="../theme/paraiso-light.css">
  26. <link rel="stylesheet" href="../theme/pastel-on-dark.css">
  27. <link rel="stylesheet" href="../theme/rubyblue.css">
  28. <link rel="stylesheet" href="../theme/solarized.css">
  29. <link rel="stylesheet" href="../theme/the-matrix.css">
  30. <link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
  31. <link rel="stylesheet" href="../theme/twilight.css">
  32. <link rel="stylesheet" href="../theme/vibrant-ink.css">
  33. <link rel="stylesheet" href="../theme/xq-dark.css">
  34. <link rel="stylesheet" href="../theme/xq-light.css">
  35. <script src="../lib/codemirror.js"></script>
  36. <script src="../mode/javascript/javascript.js"></script>
  37. <script src="../addon/selection/active-line.js"></script>
  38. <script src="../addon/edit/matchbrackets.js"></script>
  39. <style type="text/css">
  40. .CodeMirror {border: 1px solid black; font-size:13px}
  41. </style>
  42. <div id=nav>
  43. <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
  44. <ul>
  45. <li><a href="../index.html">Home</a>
  46. <li><a href="../doc/manual.html">Manual</a>
  47. <li><a href="https://github.com/marijnh/codemirror">Code</a>
  48. </ul>
  49. <ul>
  50. <li><a class=active href="#">Theme</a>
  51. </ul>
  52. </div>
  53. <article>
  54. <h2>Theme Demo</h2>
  55. <form><textarea id="code" name="code">
  56. function findSequence(goal) {
  57. function find(start, history) {
  58. if (start == goal)
  59. return history;
  60. else if (start > goal)
  61. return null;
  62. else
  63. return find(start + 5, "(" + history + " + 5)") ||
  64. find(start * 3, "(" + history + " * 3)");
  65. }
  66. return find(1, "1");
  67. }</textarea></form>
  68. <p>Select a theme: <select onchange="selectTheme()" id=select>
  69. <option selected>default</option>
  70. <option>3024-day</option>
  71. <option>3024-night</option>
  72. <option>ambiance</option>
  73. <option>base16-dark</option>
  74. <option>base16-light</option>
  75. <option>blackboard</option>
  76. <option>cobalt</option>
  77. <option>eclipse</option>
  78. <option>elegant</option>
  79. <option>erlang-dark</option>
  80. <option>lesser-dark</option>
  81. <option>mbo</option>
  82. <option>mdn-like</option>
  83. <option>midnight</option>
  84. <option>monokai</option>
  85. <option>neat</option>
  86. <option>neo</option>
  87. <option>night</option>
  88. <option>paraiso-dark</option>
  89. <option>paraiso-light</option>
  90. <option>pastel-on-dark</option>
  91. <option>rubyblue</option>
  92. <option>solarized dark</option>
  93. <option>solarized light</option>
  94. <option>the-matrix</option>
  95. <option>tomorrow-night-eighties</option>
  96. <option>twilight</option>
  97. <option>vibrant-ink</option>
  98. <option>xq-dark</option>
  99. <option>xq-light</option>
  100. </select>
  101. </p>
  102. <script>
  103. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  104. lineNumbers: true,
  105. styleActiveLine: true,
  106. matchBrackets: true
  107. });
  108. var input = document.getElementById("select");
  109. function selectTheme() {
  110. var theme = input.options[input.selectedIndex].innerHTML;
  111. editor.setOption("theme", theme);
  112. }
  113. var choice = document.location.search &&
  114. decodeURIComponent(document.location.search.slice(1));
  115. if (choice) {
  116. input.value = choice;
  117. editor.setOption("theme", choice);
  118. }
  119. </script>
  120. </article>