reveal-code-focus
A Reveal.js plugin that allows focusing on specific lines of code blocks.
Installation
Using npm:
$ npm install --save reveal-code-focus
Dependencies
reveal-code-focus
must first be loaded along with highlight.js (used for code highlighting).
Reveal;
Note: the highlight.js
file mentioned is not the Reveal.js plugin, but the actual highlight.js library.
How it works
reveal-code-focus
breaks down code blocks into individual lines. Fragments with the attribute data-code-focus
are then associated with the lines of code to focus on. When these fragments are displayed, reveal-code-focus
will focus on the respective lines of code.
Each line of code is wrapped in a <span>
element with a class of "line"
. When lines are focused on, they will also have the "focus"
class. The .line.focus
selector can thus be used for custom styling to highlight particular lines.
Usage
// Useless comment. alert('hi'); When this fragment is shown, the first line of code (`span.line`) will have the `"focus"` class added to it. Another fragment. This time, both lines will now have the `"focus"` class.
Styling
The most important style is to ensure that .line
is set to display: block
, so that lines will be rendered as block elements. You can then customize your CSS to set a different background or text colour when lines are focused on.
You can also use a specific theme by default then switch to a different one when lines are focused on.
/* use a specific highlight.js theme by default *//* eg. solarized dark *//* … */ /* on focused: switch to solarized light *//* … */
Configuration
reveal-code-focus
can be configured by passing in an options
object.
// Configure `reveal-code-focus`.;
scrollToFocused
scrollToFocused
automatically scrolls the <code>
elements such that the lines of code to be focused on is centered. This is enabled by default.
;
Multiple code blocks
For slides with multiple code blocks, the data-code-block
attribute can be used to focus on lines from a particular code block. By default, all fragments will focus on the first code block, unless otherwise specified.
data-trim
The data-trim
attribute can be used to indicate that code blocks should have whitespace trimmed from their front and back.
.line { display: block; }.line.focus { background: yellow; }