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!

// codemirror demo party!
var greeter = function(name) {
  return "Why hello there " + name;
}
console.log(greeter("Joe"));

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

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

class - "code"
mode - "javascript"
runnable - "true"

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".

// codemirror demo party!
<html style="color: green">
  <!-- this is a comment -->
  <head>
    <title>Mixed HTML Example</title>
    <style type="text/css">
      h1 {font-family: comic sans; color: #f0f;}
      div {background: yellow !important;}
      body {
        max-width: 50em;
        margin: 1em 2em 1em 5em;
      }
    </style>
  </head>
  <body>
    <h1>Mixed HTML Example</h1>
    <script>
      function jsFunc(arg1, arg2) {
        if (arg1 && arg2) document.body.innerHTML = "achoo";
      }
    </script>
  </body>
</html>

Two runnable code blocks?! CRAZY!

First

// codemirror demo party!
console.log(1);

Second

// codemirror demo party!
console.log(2);

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

// output my log
console.log(someVar);

Need to run some cleanup for your codes?

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


<script type="codemirror/cleanup" data-selector="#code3">

  someVar = 12;
  console.log(someVar);

</script>

Then your code

// set some initial value
var someVar = 15;

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>

// output my log
console.log($('script').size());

Repo:

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

By:

Irene Ros
http://ireneros.com
@ireneros