Installation

Using npm

npm install --save reveal-code-focus

Using Bower

bower install --save reveal-code-focus

Usage

Dependencies

Reveal.initialize({
  // Include other options...
  dependencies: [
    // Include other dependencies...
    { src: 'path/to/highlight.js' },
    {
      src: 'node_modules/reveal-code-focus/reveal-code-focus.js',
      async: true,
      callback: function() {
        RevealCodeFocus();
      }
    }
  ]
});

Note that the highlight.js file mentioned is not the Reveal.js plugin, but the actual highlight.js library.

Usage

<section>
  <pre><code>
  // Useless comment.
  alert('hi');
  </pre></code>
  <p class="fragment" data-code-focus="1">
    This focuses on the comment.
  </p>
  <p class="fragment" data-code-focus="1-2">
    Another fragment.
  </p>
</section>

This section is a slide. This will be highlighted by highlight.js. This fragment focuses on the first line. This fragment focuses on lines 1 and 2. See the next slide for a demo with the contents of this code block.

Demo

// Useless comment.
alert('hi');

This focuses on the comment.

Another fragment.

How it works

reveal-code-focus associates the lines of code to focus on with fragments. When the fragments are displayed, reveal-code-focus will focus on these lines.

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. Use the .line.focus selector for custom styling.

Gotchas

• Ensure that the actual highlight.js library, and not the Reveal.js plugin is loaded.

• Do not initialize code highlighting with hljs.initHighlightingOnLoad().

Extras

data-trim

<pre><code data-trim>

.line { display: block; }
.line.hover { background: yellow; }

</code></pre>

The data-trim attribute can be used to indicate that code blocks should have whitespace trimmed from their front and back.

Simply set the data-trim attribute on the <code> element of any code blocks to have its whitespace trimmed.

Styling

.line { display: block; }
.line.hover { background: yellow; }
/* include a highlight.js theme and modify it */
/* ... */
/* on focused: switch to solarized dark */
.line.focus { background: #002b36; color: #839496; }
.line.focus .hljs-comment, .line.focus .hljs-quote { color: #586e75; }
/* ... */

To style your code you might first want to set a different background or text colour. You can also use a specific theme by default… …then switch to a different one when lines are focused on.

Custom Fragments

To display only the current visible fragments, as per these slides:

<style>
  .reveal .slides section .fragment.current-only {
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .reveal .slides section .fragment.current-only.current-fragment {
    display: block;
  }
</style>
<span class="fragment current-only" data-code-focus="1"></span>