theme.html (6188B)
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/abcdef.css"> 11 <link rel="stylesheet" href="../theme/ambiance.css"> 12 <link rel="stylesheet" href="../theme/base16-dark.css"> 13 <link rel="stylesheet" href="../theme/bespin.css"> 14 <link rel="stylesheet" href="../theme/base16-light.css"> 15 <link rel="stylesheet" href="../theme/blackboard.css"> 16 <link rel="stylesheet" href="../theme/cobalt.css"> 17 <link rel="stylesheet" href="../theme/colorforth.css"> 18 <link rel="stylesheet" href="../theme/dracula.css"> 19 <link rel="stylesheet" href="../theme/duotone-dark.css"> 20 <link rel="stylesheet" href="../theme/duotone-light.css"> 21 <link rel="stylesheet" href="../theme/eclipse.css"> 22 <link rel="stylesheet" href="../theme/elegant.css"> 23 <link rel="stylesheet" href="../theme/erlang-dark.css"> 24 <link rel="stylesheet" href="../theme/hopscotch.css"> 25 <link rel="stylesheet" href="../theme/icecoder.css"> 26 <link rel="stylesheet" href="../theme/isotope.css"> 27 <link rel="stylesheet" href="../theme/lesser-dark.css"> 28 <link rel="stylesheet" href="../theme/liquibyte.css"> 29 <link rel="stylesheet" href="../theme/material.css"> 30 <link rel="stylesheet" href="../theme/mbo.css"> 31 <link rel="stylesheet" href="../theme/mdn-like.css"> 32 <link rel="stylesheet" href="../theme/midnight.css"> 33 <link rel="stylesheet" href="../theme/monokai.css"> 34 <link rel="stylesheet" href="../theme/neat.css"> 35 <link rel="stylesheet" href="../theme/neo.css"> 36 <link rel="stylesheet" href="../theme/night.css"> 37 <link rel="stylesheet" href="../theme/panda-syntax.css"> 38 <link rel="stylesheet" href="../theme/paraiso-dark.css"> 39 <link rel="stylesheet" href="../theme/paraiso-light.css"> 40 <link rel="stylesheet" href="../theme/pastel-on-dark.css"> 41 <link rel="stylesheet" href="../theme/railscasts.css"> 42 <link rel="stylesheet" href="../theme/rubyblue.css"> 43 <link rel="stylesheet" href="../theme/seti.css"> 44 <link rel="stylesheet" href="../theme/solarized.css"> 45 <link rel="stylesheet" href="../theme/the-matrix.css"> 46 <link rel="stylesheet" href="../theme/tomorrow-night-bright.css"> 47 <link rel="stylesheet" href="../theme/tomorrow-night-eighties.css"> 48 <link rel="stylesheet" href="../theme/ttcn.css"> 49 <link rel="stylesheet" href="../theme/twilight.css"> 50 <link rel="stylesheet" href="../theme/vibrant-ink.css"> 51 <link rel="stylesheet" href="../theme/xq-dark.css"> 52 <link rel="stylesheet" href="../theme/xq-light.css"> 53 <link rel="stylesheet" href="../theme/yeti.css"> 54 <link rel="stylesheet" href="../theme/zenburn.css"> 55 <script src="../lib/codemirror.js"></script> 56 <script src="../mode/javascript/javascript.js"></script> 57 <script src="../addon/selection/active-line.js"></script> 58 <script src="../addon/edit/matchbrackets.js"></script> 59 <style type="text/css"> 60 .CodeMirror {border: 1px solid black; font-size:13px} 61 </style> 62 <div id=nav> 63 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 64 65 <ul> 66 <li><a href="../index.html">Home</a> 67 <li><a href="../doc/manual.html">Manual</a> 68 <li><a href="https://github.com/codemirror/codemirror">Code</a> 69 </ul> 70 <ul> 71 <li><a class=active href="#">Theme</a> 72 </ul> 73 </div> 74 75 <article> 76 <h2>Theme Demo</h2> 77 <form><textarea id="code" name="code"> 78 function findSequence(goal) { 79 function find(start, history) { 80 if (start == goal) 81 return history; 82 else if (start > goal) 83 return null; 84 else 85 return find(start + 5, "(" + history + " + 5)") || 86 find(start * 3, "(" + history + " * 3)"); 87 } 88 return find(1, "1"); 89 }</textarea></form> 90 91 <p>Select a theme: <select onchange="selectTheme()" id=select> 92 <option selected>default</option> 93 <option>3024-day</option> 94 <option>3024-night</option> 95 <option>abcdef</option> 96 <option>ambiance</option> 97 <option>base16-dark</option> 98 <option>base16-light</option> 99 <option>bespin</option> 100 <option>blackboard</option> 101 <option>cobalt</option> 102 <option>colorforth</option> 103 <option>dracula</option> 104 <option>duotone-dark</option> 105 <option>duotone-light</option> 106 <option>eclipse</option> 107 <option>elegant</option> 108 <option>erlang-dark</option> 109 <option>hopscotch</option> 110 <option>icecoder</option> 111 <option>isotope</option> 112 <option>lesser-dark</option> 113 <option>liquibyte</option> 114 <option>material</option> 115 <option>mbo</option> 116 <option>mdn-like</option> 117 <option>midnight</option> 118 <option>monokai</option> 119 <option>neat</option> 120 <option>neo</option> 121 <option>night</option> 122 <option>panda-syntax</option> 123 <option>paraiso-dark</option> 124 <option>paraiso-light</option> 125 <option>pastel-on-dark</option> 126 <option>railscasts</option> 127 <option>rubyblue</option> 128 <option>seti</option> 129 <option>solarized dark</option> 130 <option>solarized light</option> 131 <option>the-matrix</option> 132 <option>tomorrow-night-bright</option> 133 <option>tomorrow-night-eighties</option> 134 <option>ttcn</option> 135 <option>twilight</option> 136 <option>vibrant-ink</option> 137 <option>xq-dark</option> 138 <option>xq-light</option> 139 <option>yeti</option> 140 <option>zenburn</option> 141 </select> 142 </p> 143 144 <script> 145 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 146 lineNumbers: true, 147 styleActiveLine: true, 148 matchBrackets: true 149 }); 150 var input = document.getElementById("select"); 151 function selectTheme() { 152 var theme = input.options[input.selectedIndex].textContent; 153 editor.setOption("theme", theme); 154 location.hash = "#" + theme; 155 } 156 var choice = (location.hash && location.hash.slice(1)) || 157 (document.location.search && 158 decodeURIComponent(document.location.search.slice(1))); 159 if (choice) { 160 input.value = choice; 161 editor.setOption("theme", choice); 162 } 163 CodeMirror.on(window, "hashchange", function() { 164 var theme = location.hash.slice(1); 165 if (theme) { input.value = theme; selectTheme(); } 166 }); 167 </script> 168 </article>