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 <link rel="stylesheet" href="../theme/3024-day.css">
26 <link rel="stylesheet" href="../theme/3024-night.css">
27 <link rel="stylesheet" href="../theme/base16-light.css">
28 <link rel="stylesheet" href="../theme/base16-dark.css">
29 <link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
30 <script src="../mode/javascript/javascript.js"></script>
31 <script src="../keymap/extra.js"></script>
32 <link rel="stylesheet" href="../doc/docs.css">
34 <style type="text/css">
35 .CodeMirror {border: 1px solid black; font-size:13px}
39 <h1>CodeMirror: Theme demo</h1>
41 <form><textarea id="code" name="code">
42 function findSequence(goal) {
43 function find(start, history) {
46 else if (start > goal)
49 return find(start + 5, "(" + history + " + 5)") ||
50 find(start * 3, "(" + history + " * 3)");
55 <p>Select a theme: <select onchange="selectTheme()" id=select>
56 <option selected>default</option>
57 <option>3024-day</option>
58 <option>3024-night</option>
59 <option>ambiance</option>
60 <option>base16-dark</option>
61 <option>base16-light</option>
62 <option>blackboard</option>
63 <option>cobalt</option>
64 <option>eclipse</option>
65 <option>elegant</option>
66 <option>erlang-dark</option>
67 <option>lesser-dark</option>
68 <option>midnight</option>
69 <option>monokai</option>
71 <option>night</option>
72 <option>rubyblue</option>
73 <option>solarized dark</option>
74 <option>solarized light</option>
75 <option>tomorrow-night-eighties</option>
76 <option>twilight</option>
77 <option>vibrant-ink</option>
78 <option>xq-dark</option>
79 <option>xq-light</option>
84 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
87 var input = document.getElementById("select");
88 function selectTheme() {
89 var theme = input.options[input.selectedIndex].innerHTML;
90 editor.setOption("theme", theme);
92 var choice = document.location.search &&
93 decodeURIComponent(document.location.search.slice(1));
96 editor.setOption("theme", choice);