CodeMirror Movie
February 24th, 2013
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:
- Recording a high-quality video takes too much time. For example, it took me about four hours to create a six-minute video about Zen Coding v0.5.
- The video is hard to update. For example, if someone finds errors or users will not understand how action works, it’s likely required to create a new movie.
- Because Emmet is written in pure JavaScript (and hence works in web browsers), I wanted users not only to see how things work, but to try them in action right in documentation pages.
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">
<div class="content">
|
</div>
@@@
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