theme.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Theme Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <link rel="stylesheet" href="../theme/neat.css">
  9. <link rel="stylesheet" href="../theme/elegant.css">
  10. <link rel="stylesheet" href="../theme/erlang-dark.css">
  11. <link rel="stylesheet" href="../theme/night.css">
  12. <link rel="stylesheet" href="../theme/monokai.css">
  13. <link rel="stylesheet" href="../theme/cobalt.css">
  14. <link rel="stylesheet" href="../theme/eclipse.css">
  15. <link rel="stylesheet" href="../theme/rubyblue.css">
  16. <link rel="stylesheet" href="../theme/lesser-dark.css">
  17. <link rel="stylesheet" href="../theme/xq-dark.css">
  18. <link rel="stylesheet" href="../theme/xq-light.css">
  19. <link rel="stylesheet" href="../theme/ambiance.css">
  20. <link rel="stylesheet" href="../theme/blackboard.css">
  21. <link rel="stylesheet" href="../theme/vibrant-ink.css">
  22. <link rel="stylesheet" href="../theme/solarized.css">
  23. <link rel="stylesheet" href="../theme/twilight.css">
  24. <link rel="stylesheet" href="../theme/midnight.css">
  25. <script src="../mode/javascript/javascript.js"></script>
  26. <link rel="stylesheet" href="../doc/docs.css">
  27. <style type="text/css">
  28. .CodeMirror {border: 1px solid black; font-size:13px}
  29. </style>
  30. </head>
  31. <body>
  32. <h1>CodeMirror: Theme demo</h1>
  33. <form><textarea id="code" name="code">
  34. function findSequence(goal) {
  35. function find(start, history) {
  36. if (start == goal)
  37. return history;
  38. else if (start > goal)
  39. return null;
  40. else
  41. return find(start + 5, "(" + history + " + 5)") ||
  42. find(start * 3, "(" + history + " * 3)");
  43. }
  44. return find(1, "1");
  45. }</textarea></form>
  46. <p>Select a theme: <select onchange="selectTheme()" id=select>
  47. <option selected>default</option>
  48. <option>ambiance</option>
  49. <option>blackboard</option>
  50. <option>cobalt</option>
  51. <option>eclipse</option>
  52. <option>elegant</option>
  53. <option>erlang-dark</option>
  54. <option>lesser-dark</option>
  55. <option>midnight</option>
  56. <option>monokai</option>
  57. <option>neat</option>
  58. <option>night</option>
  59. <option>rubyblue</option>
  60. <option>solarized dark</option>
  61. <option>solarized light</option>
  62. <option>twilight</option>
  63. <option>vibrant-ink</option>
  64. <option>xq-dark</option>
  65. <option>xq-light</option>
  66. </select>
  67. </p>
  68. <script>
  69. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  70. lineNumbers: true
  71. });
  72. var input = document.getElementById("select");
  73. function selectTheme() {
  74. var theme = input.options[input.selectedIndex].innerHTML;
  75. editor.setOption("theme", theme);
  76. }
  77. var choice = document.location.search &&
  78. decodeURIComponent(document.location.search.slice(1));
  79. if (choice) {
  80. input.value = choice;
  81. editor.setOption("theme", choice);
  82. }
  83. </script>
  84. </body>
  85. </html>