Reveal.js / Mark.js plugin
Based on the highlight plugin from Reveal.js, which supports animated marking (emphasizing) of specific code regions by line or line range.
This plugin additionally supports marking content:
- That is not code
- By matched regexp
- Across HTML element boundaries
The latter is particularly important if you are trying to mark regions in code that already has HTML syntax highlighting. That might be the case, for example, if you use Jekyll to render your markdown.
This magic is accomplished by harnessing the wonderful Mark.js library.
Note
Unlike the highlight plugin from Reveal.js, this plugin does not do any
code syntax highlighting. If you need that functionality, you might want to
use the two plugins together… or use a preprocessor like jekyll to get
highlighting.
Usage
Just as marking with reveal's plugin is controlled by attaching a
data-highlight attribute to the thing to be emphasized, this plugin uses a
data-mark attribute, with a compatible (superset) syntax. Marking steps are
separated by vertical bars, and can target zero or more comma-separated regions,
each of which can be a line number or a line range, e.g.
<pre data-mark="1,3|2,5-7|4"><code>
...
</code><pre>In this example, lines 1 and 3 start out marked, after the first animation step lines 2, 5, 6 and 7 are marked, and after the second animation step only line 4 is marked.
In this plugin, regions can also be specified as JavaScript regular expressions
delimited by an arbitrary non-|, non-digit. The first match for the regular
expression is marked, e.g.
<blockquote data-mark="|/creative/,#design#|4">
...
</blockquote>This example starts out with no marks, then the first occurrences of “creative”
and “design” in the <blockquote> are marked, then line 4 of the <blockquote>
is marked.
Syntax
Arbitrary whitespace is allowed at the beginning and end of the data-mark
string, and around step delimiters (|), region delimiters (,) and line range
delimiters (-).
To include a regexp delimiter in a regexp literally, you can escape it with a backslash, but you may be better off choosing a different regexp delimiter.
The final delimiter of a regexp can be followed by an arbitrary string composed
of the characters dgimsuy, indicating the standard JS regexp
flags.