CodeMirror Movie

During Emmet project development, I’ve created a few open-source tools and I’d like to introduce them to you.

The first thing I would like to introduce to you is a CodeMirror Movie. You can see it in many pages of documentation web-site: it is the plugin that shows interactive code demos.

When I started working on the documentation, I wanted to demonstrate all Emmet features in a more descriptive manner. Reading long texts describing how actions work is always boring and tedious, it is much more better to see “live” how they work.

Usually, developers record videos with demos, but it’s not my case for many reasons:

To solve these and other problems, I’ve created CodeMirror Movie plugin. It’s pretty easy to use it: you create a small script, which defines what should be done by plugin. For example, ”write the text, wait a moment, and then show the tooltip on current caret position”.

As you can guess from the plugin name, it is based on amazing CodeMirror editor, which means that you can create demos for any programming language supported by this editor.

Creating a movie

Usually, to create CodeMirror editor instance you create a <textarea> element with the initial contents of the editor and call the following JS code:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

To create a movie, you need to create a <textarea> too with initial contents and movie scenario, separated by @@@ line:

<textarea id="code">
&lt;div class="content"&gt;
    |
&lt;/div&gt;
@@@
type: Hello world
wait: 1000
tooltip: Sample tooltip
</textarea>

To initialize the movie, you should call CodeMirror.movie() method and pass <textarea> ID (or element reference) as the first argument:

var movie = CodeMirror.movie('code');

// start playback
movie.play();

Movie scenario

As noted above, to create a movie you need to write its scenario.

A scenario is a list of commands to be executed. Each command is written on a separate line in the name: value form. The value can be written as JS object with command options, but each command has a pretty good default values so you can pass just a string value of the most important option. For example, the following scenario tells CodeMirror Movie to type “Hello world”, then to wait for a second and show “CodeMirror rocks!” tooltip:

type: Hello world
wait: 1000
tooltip: CodeMirror rocks!

For more info about all available scenario commands and examples visit plugin page. You can use this plugin whatever you like (MIT license). It looks especially great in JS-based presentation engines like impress.js or reveal.js. I hope you’ll enjoy it!

comments powered by Disqus