[colorforth theme] Add

mode/forth/index.html

@@ -4,10 +4,17 @@
 <meta charset="utf-8"/>
 <link rel=stylesheet href="../../doc/docs.css">
 
+<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel=stylesheet href="../../theme/colorforth.css">
 <script src="../../lib/codemirror.js"></script>
 <script src="forth.js"></script>
-<style>.CodeMirror {border: 2px inset #dee;}</style>
+<style>
+.CodeMirror {
+    font-family: 'Droid Sans Mono', monospace;
+    font-size: 14px;
+}
+</style>
 <div id=nav>
   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
 
@@ -46,8 +53,8 @@
 : sort ( array len -- )
   1 ?do
     dup i cells + insert
-  loop drop ;
-</textarea></form>
+  loop drop ;</textarea>
+  </form>
 
 <script>
   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
@@ -56,6 +63,7 @@
     indentUnit: 2,
     tabSize: 2,
     autofocus: true,
+    theme: "colorforth",
     mode: "text/x-forth"
   });
 </script>

theme/colorforth.css

+.cm-s-colorforth.CodeMirror { background: #000000; color: #f8f8f8; }
+.cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; }
+.cm-s-colorforth .CodeMirror-guttermarker-subtle { color: #78846f; }
+.cm-s-colorforth .CodeMirror-linenumber { color: #bababa; }
+.cm-s-colorforth .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-colorforth span.cm-comment     { color: #ededed; }
+.cm-s-colorforth span.cm-def         { color: #ff1c1c; font-weight:bold; }
+.cm-s-colorforth span.cm-keyword     { color: #ffd900; }
+.cm-s-colorforth span.cm-builtin     { color: #00d95a; }
+.cm-s-colorforth span.cm-variable    { color: #73ff00; }
+.cm-s-colorforth span.cm-string      { color: #007bff; }
+.cm-s-colorforth span.cm-number      { color: #00c4ff; }
+.cm-s-colorforth span.cm-atom        { color: #606060; }
+
+.cm-s-colorforth span.cm-variable-2  { color: #EEE; }
+.cm-s-colorforth span.cm-variable-3  { color: #DDD; }
+.cm-s-colorforth span.cm-property    {}
+.cm-s-colorforth span.cm-operator    {}
+
+.cm-s-colorforth span.cm-meta        { color: yellow; }
+.cm-s-colorforth span.cm-qualifier   { color: #FFF700; }
+.cm-s-colorforth span.cm-bracket     { color: #cc7; }
+.cm-s-colorforth span.cm-tag         { color: #FFBD40; }
+.cm-s-colorforth span.cm-attribute   { color: #FFF700; }
+.cm-s-colorforth span.cm-error       { color: #f00; }
+
+.cm-s-colorforth .CodeMirror-selected { background: #333d53 !important; }
+
+.cm-s-colorforth span.cm-compilation { background: rgba(255, 255, 255, 0.12); }