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.
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
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.
- Be sure to include the additional
Thee rest should really behave itself.... I hope.
Move all this into a folder called 'codemirror' in your deck.js/extensions/ folder.
Include the stylesheet:
<link rel="stylesheet" href="../extensions/codemirror/deck.codemirror.css">
Include the JS source:
Include your favorite CodeMirror syntax style:
<link rel="stylesheet" href="../extensions/codemirror/themes/default.css">
cobalt.css default.css elegant.css lesser-dark.css neat.css night.css
There are two ways to create code blocks: Inside your slide:
Any other item:
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:
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:
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,_".
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.
Irene Ros (@ireneros) http://bocoup.com
Much thanks to:
- @tbranyen (Tim Branyen)
- @Anks (Ankit Solanki)