#305: codemirror theme picker
authorNicholas Bollweg <nicholas.bollweg@gtri.gatech.edu>
Tue, 22 Oct 2013 10:44:59 -0400
changeset 2073 379d6e9af7d7
parent 2072 3e919d45daa1
child 2074 8749a227f7c9
#305: codemirror theme picker
playground/index.html
playground/playground.js
--- a/playground/index.html	Mon Oct 21 16:16:36 2013 -0400
+++ b/playground/index.html	Tue Oct 22 10:44:59 2013 -0400
@@ -14,16 +14,18 @@
     <!-- Meta Tags -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-
+    
+    
     <!-- Style Sheets -->
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap.css">
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap-responsive.css">
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/font-awesome.css">
-    <link rel="stylesheet" href="../common/prettify.css" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="../common/prettify.css">
     
     <!-- CodeMirror -->
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.css">
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css">
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.css">
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/elegant.css" id="theme-stylesheet">
     
     <link rel="shortcut icon" href="../favicon.ico" />
   </head>
@@ -103,6 +105,44 @@
         <button id="btn-recipe" class="btn button"><span>Recipe</span></button>
         <button id="btn-library" class="btn button"><span>Library</span></button>
       </div>
+      
+      <div class="pull-right">
+        <div class="dropdown">
+          <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+            <i class="icon-eye-open"></i> <b id="theme-name">elegant</b> <b class="caret"></b>
+          </button>
+          <ul id="theme-select" class="dropdown-menu">
+            <li><a>3024-day</a></li>
+            <li><a>3024-night</a></li>
+            <li><a>ambiance</a></li>
+            <li><a>base16-dark</a></li>
+            <li><a>base16-light</a></li>
+            <li><a>blackboard</a></li>
+            <li><a>cobalt</a></li>
+            <li><a>eclipse</a></li>
+            <li><a>elegant</a></li>
+            <li><a>erlang-dark</a></li>
+            <li><a>lesser-dark</a></li>
+            <li><a>mbo</a></li>
+            <li><a>midnight</a></li>
+            <li><a>monokai</a></li>
+            <li><a>neat</a></li>
+            <li><a>night</a></li>
+            <li><a>paraiso-dark</a></li>
+            <li><a>paraiso-light</a></li>
+            <li><a>rubyblue</a></li>
+            <li><a>solarized dark</a></li>
+            <li><a>solarized light</a></li>
+            <li><a>the-matrix</a></li>
+            <li><a>tomorrow-night-eighties</a></li>
+            <li><a>twilight</a></li>
+            <li><a>vibrant-ink</a></li>
+            <li><a>xq-dark</a></li>
+            <li><a>xq-light</a></li>
+          </ul>
+        </div>
+      </div>
+      
       <br/><br/>
       <div id="markup-container">
         <div class="row">
--- a/playground/playground.js	Mon Oct 21 16:16:36 2013 -0400
+++ b/playground/playground.js	Tue Oct 22 10:44:59 2013 -0400
@@ -176,6 +176,7 @@
         lineWrapping: true,
         mode: "application/json",
         gutters: ["CodeMirror-lint-markers"],
+        theme: "elegant",
         lint: true
       });
       
@@ -532,10 +533,24 @@
       });
     });
 
-
     $('#use-context-map').change(function() {
       playground.process();
     });
+    
+    $('#theme-select a').click(function(evt){
+      var theme = evt.currentTarget.text;
+      
+      $("#theme-name").text(theme);
+      
+      $('#theme-stylesheet').prop("href",
+        "//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/" +
+        theme + ".css" 
+      );
+      
+      for(var key in playground.editors){
+        playground.editors[key].setOption("theme", theme);
+      }
+    });
   });
 
 })(jQuery);