JavaScript CSS
Latest commit e1e14b9 May 20, 2014 1 @iros deprecating message
Permalink
Failed to load latest commit information.
introduction Added cleanup hidden script support. Nov 8, 2011
mode Adding support for all codemirror syntax highlighting. Note the chang… Sep 24, 2011
themes
.gitignore added gitignore, hidden code, and exposeGlobals Oct 5, 2011
CONTRIBUTORS.txt adding globals support and hidden scripts - thanks tbranyen. Oct 5, 2011
MIT-LICENSE.txt
README.md deprecating message May 20, 2014
VERSION.txt
codemirror.js Adding support for all codemirror syntax highlighting. Note the chang… Sep 24, 2011
deck.codemirror.css Adding a 'clear' button alongside 'run' for runnable code Dec 27, 2011
deck.codemirror.js fixes the slides that does not scale correctly when they have codemir… Dec 17, 2012
deck.codemirror.scss Initial commit - moving from pull request into deck.js Sep 8, 2011

README.md

Deprecated!

Recent changes to deck.js make this no longer usable. If you'd like to make a pull request to update this plugin, please do, otherwise don't use it.

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.

An example is running here: http://ireneros.com/deck/deck.js-codemirror/introduction

You can also see those slides in the introduction folder.

1.0.0rc

Due to CodeMirror 3.0 being somewhat different, I've had to make a few adjustments to the plugin styling. You can test them on the 1.0.0rc branch. Please submit issues if any exist, otherwise I will be merging this into master in the next few weeks.

Upgrade notes

  1. Be sure to include the additional codemirror.css file.

Thee rest should really behave itself.... I hope.

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:

<!-- Base codemiror code -->
<script src="../extensions/codemirror/codemirror.js"></script>

<!-- Syntax highlighting Modes -->

<!-- javascript -->
<script src="../extensions/codemirror/mode/javascript/javascript.js"></script>

<!-- html mode (note html mode requires xml, css and javascript) -->
<script src="../extensions/codemirror/mode/xml/xml.js"></script>
<script src="../extensions/codemirror/mode/css/css.js"></script>
<script src="../extensions/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<!-- Plugin code -->
<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
lesser-dark.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>

Setup scripts:

Sometimes you have to do a lot of set up for your code that doesn't need to live inside the actual codemirror editor (because it's not of interest to your readers.) You can now create hidden script tags that will be evaluated on "Run" before the editor code runs.

It must have the type set to "codemirror" and the data-selector must be set to the selector of the editor that it's running for:

<script type="codemirror" data-selector="#code4">
  var someVar = 10;
</script>

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true">
  // output my log
  console.log(someVar);
</textarea>

Cleanup scripts:

Sometimes you just have to clean up the mess you made, or have something execute after your code that the reader doesn't need to see. No problem! Add a cleanup script as follows:

<script type="codemirror/cleanup" data-selector="#code4">
  someVar = 20;

  // This will output 20!
  console.log(someVar);
</script>

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true">
  var someVar = 10;
</textarea>

Globals!

Sometimes you just need to access a global of some kind. The code in the codemirror editors is executed in a sandbox, which means whatever it is you load in your actual slides, is NOT going to be available by default. To give access to, for example, jQuery object, define a "globals" attribute on the code blocks with the names of the vars you need. Globals can be comma delimited, for example: "$,Backbone,_".

<textarea id="code4" name="code" class="code" mode="javascript" style="display: none;" runnable="true" globals="$">
  // output my log
  console.log($('script').size());
</textarea>

Element Attributes:

Regardless of your element type, the following attributes should be set:

  • class - code (should always be set to code.)
  • mode - language mode. This plugin now supports all modes. Look into the mode directory and include the ones you like. Note that some require additional modes so be sure to check the Codemirror site.
  • 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

Contriburors:

Much thanks to:

  • @tbranyen (Tim Branyen)
  • @Anks (Ankit Solanki)