| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | <!doctype html><html>  <head>    <title>CodeMirror 2: Theme Demo</title>    <link rel="stylesheet" href="../lib/codemirror.css">    <script src="../lib/codemirror.js"></script>    <link rel="stylesheet" href="../theme/default.css">    <link rel="stylesheet" href="../theme/neat.css">    <link rel="stylesheet" href="../theme/elegant.css">    <link rel="stylesheet" href="../theme/night.css">    <script src="../mode/javascript/javascript.js"></script>    <link rel="stylesheet" href="../css/docs.css">    <style type="text/css">      .CodeMirror {border: 1px solid black;}    </style>  </head>  <body>    <h1>CodeMirror 2: Theme demo</h1>    <form><textarea id="code" name="code">function findSequence(goal) {  function find(start, history) {    if (start == goal)      return history;    else if (start > goal)      return null;    else      return find(start + 5, "(" + history + " + 5)") ||             find(start * 3, "(" + history + " * 3)");  }  return find(1, "1");}</textarea></form><p>Select a theme: <select onchange="selectTheme(this)">    <option selected>default</option>    <option>night</option>    <option>neat</option>    <option>elegant</option></select></p><script>  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {    lineNumbers: true  });  function selectTheme(node) {    var theme = node.options[node.selectedIndex].innerHTML;    editor.setOption("theme", theme);  }</script>  </body></html>
 |