Hey hey! We’re pretty huge fans of CodeMirror over at Code School (use it as our editor in just about every course).
Just for fun, we’re trying to see what would be involved in converting some of our Keynote slides to HTML/JS. It’s starting to stretch the limits of what CodeMirror is designed for though. I’m curious to get some potential suggestions on ways that come to mind to accomplish these features.
Animating In Code
The idea behind this is that in order to teach this concept, the code isn’t shown when someone loads, but would be animated in (using a CSS custom animation) when a user hits a spacebar. (this isn’t end user facing, just for us to make a video).
Bit hard to see in the video, but some code is shown on load. Then some code is animated in using a “typewriter” kind of animation, where it makes each character appear one after another.
Any thoughts on how to do something like this? One way I was thinking about doing it wasn’t that pretty:
First it involves creating a “code markup language” that is used rather than entering code directly. I guess this would be equivalent to writing markdown for text and having it generate HTML. This would involve writing marked up code and having it generate code that is highlighted and controlled with CodeMirror, but over time.
This isn’t flushed out to an extent of Markdown or anything, more MVP to get something working:
<cs-annotate animation='typewritter' order='1'><!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Seussville Census Data</title>
</head>
<body>
<h1>Seussville Census Data</h1>
</cs-annotate>
<cs-annotate animation='typewritter' order='3'><script src='http://d3js.org/d3.v3.min.js'></script></wb-annotate>
<wb-annotate animation='typewritter' order='2'></body>
</html></cs-annotate>
Multiline
One of the tricky parts of this seems to be that it’s multiline, which makes searchCursor not work with it. The way I’m attempting to solve this for now is getting a cursor over <cs-annotate> elements, and removing them, but finding the next </cs-annotate> and creating a markText from the start of the start tag to the end of the end tag.
This at least marks up the right area for an animation. The next step would be iterating over each of the elements in each of these marked groups and animating it in with a constant pace so that to the end user it looks like it’s a consistent speed.
Another issue I was running into was adding additional metadata to each marked group. Looks like className is the only thing settable on it, so I’d more be holding associates for that elsewhere.
Questions
Any other things come to mind on how to solve this one? Is markText the right place to be looking? Is there a way to do a searchCuror that searches over multiple lines (pretty sure there isn’t but doesn’t hurt to ask!).