Skip to content

Reveal.js plugin for marking selected lines or regions of text

Notifications You must be signed in to change notification settings

stlab/reveal-mark-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Reveal.js plugin for marking selected lines or regions of text

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published