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");
</div>

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!

First

Second

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;
</script>

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());
</textarea>

Repo:

https://github.com/iros/deck.js-codemirror

By:

Irene Ros
http://ireneros.com
@ireneros

/

#