Are you ready for some CODE inside your slides?! That you can Edit?!

"Integrating the awesome CodeMirror into Deck.js:"

This Code is in a Text Area!

You can edit it and run it again! Try it!

That code was created with a text area that had the following attributes:

The rest just HAPPENS

Code blocks aren't runnable by default. Because you might want to put crazy non runnable code in there. Like, html.

You can specify a codemirror theme as long as you include the stylesheet for it by setting the theme attribute

This Code is in a div!

It looks like this:
<div id="code" class="code" name="code" mode="javascript" style="display: none;">
// codemirror demo party!
var obj = { text : "Hello all!"};
console.log("HI THERE");

HTML Syntax?! Sweet.

Note that it's defined by being put inside a textarea, that way it doesn't get evaluated. Replicate that however you see fit. Also, set the mode="text/html", not just "html".

Two runnable code blocks?! CRAZY!



Need to run some setup for your codes?

Embed a secret hidden script tag like so in your slide:

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

Then your code

Sometimes you need some 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.

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



Irene Ros