Initial commit - moving from pull request into deck.js

iros · Sep 8, 2011 · 0757d21 · 0757d21
commit 0757d21
Show file tree

Hide file tree

Showing 10 changed files with 566 additions and 0 deletions.
diff --git a/MIT-LICENSE.txt b/MIT-LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2011 Irene Ros
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,71 @@
+Deck.js-CodeMirror Extension
+============================
+
+This extension allows you to embed codemirror code snippets in your slides. Those codeblocks
+can also be executable, which is pretty exciting.
+
+# Installation: #
+
+Move all this into a folder called 'codemirror' in your deck.js/extensions/ folder.
+
+# Setup: #
+
+Include the stylesheet:
+
+    <link rel="stylesheet" href="../extensions/codemirror/deck.codemirror.css">
+
+Include the JS source:
+
+    <script src="../extensions/codemirror/deck.codemirror.js"></script>
+
+Include your favorite CodeMirror syntax style:
+
+    <link rel="stylesheet" href="../extensions/codemirror/themes/default.css">
+
+  Options are:
+
+    cobalt.css
+    default.css
+    elegant.css
+    neat.css
+    night.css
+
+# Use: #
+
+There are two ways to create code blocks:
+Inside your slide:
+
+## Text Area:
+
+    <div>
+      <textarea id="code" name="code" class="code" mode="javascript" style="display: none;" runnable="true">// codemirror demo party!
+        var greeter = function(name) {
+          return "Why hello there " + name;
+        }
+        console.log(greeter("Joe"));
+      </textarea>
+    </div>
+
+## Any other item:
+
+    <div>
+      <div id="code" name="code" class="code" mode="javascript" style="display: none;">// codemirror demo party!
+        var obj = { text : "Hello all!"};
+        console.log("HI THERE");
+      </div>
+    </div>
+
+# Element Attributes: #
+
+Regardless of your element type, the following attributes should be set:
+
+* class - code (should always be set to code.)
+* mode  - language mode (currently only javascript/ruby/yaml is supported. I can add more, just submit a ticket. Trying to keep things small and compressed.)
+* theme (optional) - If you want multiple themes in your slides, include multiple stylesheets and set this attribute to the theme name.
+* runnable (optiona) - If true, will add a Run button to the window and pipe the eval's console output to an output element right below. 
+
+# Contact: #
+Irene Ros (@ireneros)
+http://bocoup.com
+
+
diff --git a/deck.codemirror.css b/deck.codemirror.css
@@ -0,0 +1,89 @@
+.deck-container .slide {
+  font-weight: normal; }
+  .deck-container .slide .deck-codemirror-result {
+    border: 1px solid #ddd;
+    border-top: none;
+    padding: 10px;
+    font-family: monospace; }
+  .deck-container .slide .CodeMirror {
+    line-height: 1em;
+    font-family: monospace;
+    overflow: auto;
+    height: 100%;
+    border: 1px solid #ddd; }
+    .deck-container .slide .CodeMirror .button {
+      padding: 5px;
+      cursor: pointer;
+      background-color: #ddd;
+      position: relative;
+      float: right;
+      font-size: 11px;
+      line-height: 16px;
+      padding: 2px 6px;
+      margin-bottom: -20px;
+      margin-right: 10px;
+      border-radius: 4px;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      z-index: 1;
+      top: 8px; }
+    .deck-container .slide .CodeMirror .button:hover {
+      background-color: #eee; }
+  .deck-container .slide .CodeMirror-scroll {
+    /* overflow: auto; */
+    /* This is needed to prevent an IE[67] bug where the scrolled content
+       is visible outside of the scrolling box. */
+    position: relative;
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 100%; }
+  .deck-container .slide .CodeMirror-gutter {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-right: 1px solid #eee;
+    min-width: 2em;
+    height: 100%; }
+  .deck-container .slide .CodeMirror-gutter-text {
+    color: #aaa;
+    text-align: right;
+    padding: .4em .2em .4em .4em; }
+  .deck-container .slide .CodeMirror-lines {
+    padding: .4em; }
+  .deck-container .slide .CodeMirror pre {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    border-width: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal; }
+  .deck-container .slide .CodeMirror textarea {
+    font-family: inherit !important;
+    font-size: inherit !important; }
+  .deck-container .slide .CodeMirror-cursor {
+    z-index: 10;
+    position: absolute;
+    visibility: hidden;
+    border-left: 1px solid black !important; }
+  .deck-container .slide .CodeMirror-focused .CodeMirror-cursor {
+    visibility: visible; }
+  .deck-container .slide span.CodeMirror-selected {
+    background: #ccc !important;
+    color: HighlightText !important; }
+  .deck-container .slide .CodeMirror-focused span.CodeMirror-selected {
+    background: Highlight !important; }
+  .deck-container .slide .CodeMirror-matchingbracket {
+    color: #0f0 !important; }
+  .deck-container .slide .CodeMirror-nonmatchingbracket {
+    color: #f22 !important; }
diff --git a/deck.codemirror.js b/deck.codemirror.js
diff --git a/deck.codemirror.scss b/deck.codemirror.scss
@@ -0,0 +1,107 @@
+.deck-container .slide { 
+
+  font-weight: normal;
+  .deck-codemirror-result {
+    border: 1px solid #ddd;
+    border-top: none;
+    padding: 10px;
+    font-family: monospace;
+  }
+  .CodeMirror {
+    line-height: 1em;
+    font-family: monospace;
+    overflow: auto;
+    height: 100%;
+    border: 1px solid #ddd;
+
+    .button {
+      padding: 5px;
+      cursor: pointer;
+      background-color: #ddd;
+      position: relative;
+      float: right;
+      font-size: 11px;
+      line-height: 16px;
+      padding: 2px 6px;
+      margin-bottom: -20px;
+      margin-right: 10px;
+      border-radius: 4px;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      z-index: 1;
+      top: 8px;
+    }
+    .button:hover {
+      background-color: #eee;
+    }
+  }
+
+  .CodeMirror-scroll {
+    /* overflow: auto; */
+
+    /* This is needed to prevent an IE[67] bug where the scrolled content
+       is visible outside of the scrolling box. */
+    position: relative;
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 100%
+  }
+
+  .CodeMirror-gutter {
+    position: absolute; left: 0; top: 0;
+    z-index: 10;
+    background-color: #f7f7f7;
+    border-right: 1px solid #eee;
+    min-width: 2em;
+    height: 100%;
+  }
+
+  .CodeMirror-gutter-text {
+    color: #aaa;
+    text-align: right;
+    padding: .4em .2em .4em .4em;
+  }
+  .CodeMirror-lines {
+    padding: .4em;
+  }
+
+  .CodeMirror pre {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    border-width: 0; margin: 0; padding: 0; background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0; margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+  }
+
+  .CodeMirror textarea {
+    font-family: inherit !important;
+    font-size: inherit !important;
+  }
+
+  .CodeMirror-cursor {
+    z-index: 10;
+    position: absolute;
+    visibility: hidden;
+    border-left: 1px solid black !important;
+  }
+  .CodeMirror-focused .CodeMirror-cursor {
+    visibility: visible;
+  }
+
+  span.CodeMirror-selected {
+    background: #ccc !important;
+    color: HighlightText !important;
+  }
+  .CodeMirror-focused span.CodeMirror-selected {
+    background: Highlight !important;
+  }
+
+  .CodeMirror-matchingbracket {color: #0f0 !important;}
+  .CodeMirror-nonmatchingbracket {color: #f22 !important;}
+}
diff --git a/themes/cobalt.css b/themes/cobalt.css
@@ -0,0 +1,17 @@
+.cm-s-cobalt { background: #002240; color: white; }
+.cm-s-cobalt span.CodeMirror-selected { background: #b36539 !important; }
+.cm-s-cobalt .CodeMirror-gutter { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-cobalt .CodeMirror-gutter-text { color: #d0d0d0; }
+.cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-cobalt span.cm-comment { color: #08f; }
+.cm-s-cobalt span.cm-atom { color: #845dc4; }
+.cm-s-cobalt span.cm-number, .cm-s-cobalt span.cm-attribute { color: #ff80e1; }
+.cm-s-cobalt span.cm-keyword { color: #ffee80; }
+.cm-s-cobalt span.cm-string { color: #3ad900; }
+.cm-s-cobalt span.cm-meta { color: #ff9d00; }
+.cm-s-cobalt span.cm-variable-2, .cm-s-cobalt span.cm-tag { color: #9effff; }
+.cm-s-cobalt span.cm-variable-3, .cm-s-cobalt span.cm-def { color: white; }
+.cm-s-cobalt span.cm-error { color: #9d1e15; }
+.cm-s-cobalt span.cm-bracket { color: #d8d8d8; }
+.cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; }
diff --git a/themes/default.css b/themes/default.css
@@ -0,0 +1,19 @@
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #0a5;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
diff --git a/themes/elegant.css b/themes/elegant.css
@@ -0,0 +1,9 @@
+.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;}
+.cm-s-elegant span.cm-comment {color: #262;font-style: italic;}
+.cm-s-elegant span.cm-meta {color: #555;font-style: italic;}
+.cm-s-elegant span.cm-variable {color: black;}
+.cm-s-elegant span.cm-variable-2 {color: #b11;}
+.cm-s-elegant span.cm-qualifier {color: #555;}
+.cm-s-elegant span.cm-keyword {color: #730;}
+.cm-s-elegant span.cm-builtin {color: #30a;}
+.cm-s-elegant span.cm-error {background-color: #fdd;}
diff --git a/themes/neat.css b/themes/neat.css
@@ -0,0 +1,8 @@
+.cm-s-neat span.cm-comment { color: #a86; }
+.cm-s-neat span.cm-keyword { font-weight: bold; color: blue; }
+.cm-s-neat span.cm-string { color: #a22; }
+.cm-s-neat span.cm-builtin { font-weight: bold; color: #077; }
+.cm-s-neat span.cm-special { font-weight: bold; color: #0aa; }
+.cm-s-neat span.cm-variable { color: black; }
+.cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
+.cm-s-neat span.cm-meta {color: #555;}
diff --git a/themes/night.css b/themes/night.css
@@ -0,0 +1,20 @@
+/* Loosely based on the Midnight Textmate theme */
+
+.cm-s-night { background: #0a001f; color: #f8f8f8; }
+.cm-s-night span.CodeMirror-selected { background: #a8f !important; }
+.cm-s-night .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-night .CodeMirror-gutter-text { color: #f8f8f8; }
+.cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-night span.cm-comment { color: #6900a1; }
+.cm-s-night span.cm-atom { color: #845dc4; }
+.cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; }
+.cm-s-night span.cm-keyword { color: #599eff; }
+.cm-s-night span.cm-string { color: #37f14a; }
+.cm-s-night span.cm-meta { color: #7678e2; }
+.cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; }
+.cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { color: white; }
+.cm-s-night span.cm-error { color: #9d1e15; }
+.cm-s-night span.cm-bracket { color: #8da6ce; }
+.cm-s-night span.cm-comment { color: #6900a1; }
+.cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }