Mercurial
comparison .cms/lib/codemirror/demo/theme.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 | |
3 <title>CodeMirror: Theme Demo</title> | |
4 <meta charset="utf-8"/> | |
5 <link rel=stylesheet href="../doc/docs.css"> | |
6 | |
7 <link rel="stylesheet" href="../lib/codemirror.css"> | |
8 <link rel="stylesheet" href="../theme/3024-day.css"> | |
9 <link rel="stylesheet" href="../theme/3024-night.css"> | |
10 <link rel="stylesheet" href="../theme/abbott.css"> | |
11 <link rel="stylesheet" href="../theme/abcdef.css"> | |
12 <link rel="stylesheet" href="../theme/ambiance.css"> | |
13 <link rel="stylesheet" href="../theme/ayu-dark.css"> | |
14 <link rel="stylesheet" href="../theme/ayu-mirage.css"> | |
15 <link rel="stylesheet" href="../theme/base16-dark.css"> | |
16 <link rel="stylesheet" href="../theme/bespin.css"> | |
17 <link rel="stylesheet" href="../theme/base16-light.css"> | |
18 <link rel="stylesheet" href="../theme/blackboard.css"> | |
19 <link rel="stylesheet" href="../theme/cobalt.css"> | |
20 <link rel="stylesheet" href="../theme/colorforth.css"> | |
21 <link rel="stylesheet" href="../theme/dracula.css"> | |
22 <link rel="stylesheet" href="../theme/duotone-dark.css"> | |
23 <link rel="stylesheet" href="../theme/duotone-light.css"> | |
24 <link rel="stylesheet" href="../theme/eclipse.css"> | |
25 <link rel="stylesheet" href="../theme/elegant.css"> | |
26 <link rel="stylesheet" href="../theme/erlang-dark.css"> | |
27 <link rel="stylesheet" href="../theme/gruvbox-dark.css"> | |
28 <link rel="stylesheet" href="../theme/hopscotch.css"> | |
29 <link rel="stylesheet" href="../theme/icecoder.css"> | |
30 <link rel="stylesheet" href="../theme/isotope.css"> | |
31 <link rel="stylesheet" href="../theme/juejin.css"> | |
32 <link rel="stylesheet" href="../theme/lesser-dark.css"> | |
33 <link rel="stylesheet" href="../theme/liquibyte.css"> | |
34 <link rel="stylesheet" href="../theme/lucario.css"> | |
35 <link rel="stylesheet" href="../theme/material.css"> | |
36 <link rel="stylesheet" href="../theme/material-darker.css"> | |
37 <link rel="stylesheet" href="../theme/material-palenight.css"> | |
38 <link rel="stylesheet" href="../theme/material-ocean.css"> | |
39 <link rel="stylesheet" href="../theme/mbo.css"> | |
40 <link rel="stylesheet" href="../theme/mdn-like.css"> | |
41 <link rel="stylesheet" href="../theme/midnight.css"> | |
42 <link rel="stylesheet" href="../theme/monokai.css"> | |
43 <link rel="stylesheet" href="../theme/moxer.css"> | |
44 <link rel="stylesheet" href="../theme/neat.css"> | |
45 <link rel="stylesheet" href="../theme/neo.css"> | |
46 <link rel="stylesheet" href="../theme/night.css"> | |
47 <link rel="stylesheet" href="../theme/nord.css"> | |
48 <link rel="stylesheet" href="../theme/oceanic-next.css"> | |
49 <link rel="stylesheet" href="../theme/panda-syntax.css"> | |
50 <link rel="stylesheet" href="../theme/paraiso-dark.css"> | |
51 <link rel="stylesheet" href="../theme/paraiso-light.css"> | |
52 <link rel="stylesheet" href="../theme/pastel-on-dark.css"> | |
53 <link rel="stylesheet" href="../theme/railscasts.css"> | |
54 <link rel="stylesheet" href="../theme/rubyblue.css"> | |
55 <link rel="stylesheet" href="../theme/seti.css"> | |
56 <link rel="stylesheet" href="../theme/shadowfox.css"> | |
57 <link rel="stylesheet" href="../theme/solarized.css"> | |
58 <link rel="stylesheet" href="../theme/the-matrix.css"> | |
59 <link rel="stylesheet" href="../theme/tomorrow-night-bright.css"> | |
60 <link rel="stylesheet" href="../theme/tomorrow-night-eighties.css"> | |
61 <link rel="stylesheet" href="../theme/ttcn.css"> | |
62 <link rel="stylesheet" href="../theme/twilight.css"> | |
63 <link rel="stylesheet" href="../theme/vibrant-ink.css"> | |
64 <link rel="stylesheet" href="../theme/xq-dark.css"> | |
65 <link rel="stylesheet" href="../theme/xq-light.css"> | |
66 <link rel="stylesheet" href="../theme/yeti.css"> | |
67 <link rel="stylesheet" href="../theme/idea.css"> | |
68 <link rel="stylesheet" href="../theme/darcula.css"> | |
69 <link rel="stylesheet" href="../theme/yonce.css"> | |
70 <link rel="stylesheet" href="../theme/zenburn.css"> | |
71 <script src="../lib/codemirror.js"></script> | |
72 <script src="../mode/javascript/javascript.js"></script> | |
73 <script src="../addon/selection/active-line.js"></script> | |
74 <script src="../addon/edit/matchbrackets.js"></script> | |
75 <style> | |
76 .CodeMirror {border: 1px solid black; font-size:13px} | |
77 </style> | |
78 <div id=nav> | |
79 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
80 | |
81 <ul> | |
82 <li><a href="../index.html">Home</a> | |
83 <li><a href="../doc/manual.html">Manual</a> | |
84 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
85 </ul> | |
86 <ul> | |
87 <li><a class=active href="#">Theme</a> | |
88 </ul> | |
89 </div> | |
90 | |
91 <article> | |
92 <h2>Theme Demo</h2> | |
93 <form><textarea id="code" name="code"> | |
94 function findSequence(goal) { | |
95 function find(start, history) { | |
96 if (start == goal) | |
97 return history; | |
98 else if (start > goal) | |
99 return null; | |
100 else | |
101 return find(start + 5, "(" + history + " + 5)") || | |
102 find(start * 3, "(" + history + " * 3)"); | |
103 } | |
104 return find(1, "1"); | |
105 }</textarea></form> | |
106 | |
107 <p>Select a theme: <select onchange="selectTheme()" id=select> | |
108 <option selected>default</option> | |
109 <option>3024-day</option> | |
110 <option>3024-night</option> | |
111 <option>abbott</option> | |
112 <option>abcdef</option> | |
113 <option>ambiance</option> | |
114 <option>ayu-dark</option> | |
115 <option>ayu-mirage</option> | |
116 <option>base16-dark</option> | |
117 <option>base16-light</option> | |
118 <option>bespin</option> | |
119 <option>blackboard</option> | |
120 <option>cobalt</option> | |
121 <option>colorforth</option> | |
122 <option>darcula</option> | |
123 <option>dracula</option> | |
124 <option>duotone-dark</option> | |
125 <option>duotone-light</option> | |
126 <option>eclipse</option> | |
127 <option>elegant</option> | |
128 <option>erlang-dark</option> | |
129 <option>gruvbox-dark</option> | |
130 <option>hopscotch</option> | |
131 <option>icecoder</option> | |
132 <option>idea</option> | |
133 <option>isotope</option> | |
134 <option>juejin</option> | |
135 <option>lesser-dark</option> | |
136 <option>liquibyte</option> | |
137 <option>lucario</option> | |
138 <option>material</option> | |
139 <option>material-darker</option> | |
140 <option>material-palenight</option> | |
141 <option>material-ocean</option> | |
142 <option>mbo</option> | |
143 <option>mdn-like</option> | |
144 <option>midnight</option> | |
145 <option>monokai</option> | |
146 <option>moxer</option> | |
147 <option>neat</option> | |
148 <option>neo</option> | |
149 <option>night</option> | |
150 <option>nord</option> | |
151 <option>oceanic-next</option> | |
152 <option>panda-syntax</option> | |
153 <option>paraiso-dark</option> | |
154 <option>paraiso-light</option> | |
155 <option>pastel-on-dark</option> | |
156 <option>railscasts</option> | |
157 <option>rubyblue</option> | |
158 <option>seti</option> | |
159 <option>shadowfox</option> | |
160 <option>solarized dark</option> | |
161 <option>solarized light</option> | |
162 <option>the-matrix</option> | |
163 <option>tomorrow-night-bright</option> | |
164 <option>tomorrow-night-eighties</option> | |
165 <option>ttcn</option> | |
166 <option>twilight</option> | |
167 <option>vibrant-ink</option> | |
168 <option>xq-dark</option> | |
169 <option>xq-light</option> | |
170 <option>yeti</option> | |
171 <option>yonce</option> | |
172 <option>zenburn</option> | |
173 </select> | |
174 </p> | |
175 | |
176 <script> | |
177 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
178 lineNumbers: true, | |
179 styleActiveLine: true, | |
180 matchBrackets: true | |
181 }); | |
182 var input = document.getElementById("select"); | |
183 function selectTheme() { | |
184 var theme = input.options[input.selectedIndex].textContent; | |
185 editor.setOption("theme", theme); | |
186 location.hash = "#" + theme; | |
187 } | |
188 var choice = (location.hash && location.hash.slice(1)) || | |
189 (document.location.search && | |
190 decodeURIComponent(document.location.search.slice(1))); | |
191 if (choice) { | |
192 input.value = choice; | |
193 editor.setOption("theme", choice); | |
194 } | |
195 CodeMirror.on(window, "hashchange", function() { | |
196 var theme = location.hash.slice(1); | |
197 if (theme) { input.value = theme; selectTheme(); } | |
198 }); | |
199 </script> | |
200 </article> |