bnjmnt4n/reveal-code-focus

A Reveal.js plugin that allows focusing on specific lines of code blocks.

reveal-code-focus

Notice: This plugin is deprecated. Reveal.js v4 contains many improvements to code blocks, which when coupled with the Auto-Animate feature, can replicate the functionality of this plugin.

A Reveal.js plugin that allows focusing on specific lines of code blocks.

View the live demo.

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.initialize({
  // Include other options…
  dependencies: [
    // Include other dependencies…
    // Load highlight.js
    { src: 'path/to/highlight.pack.js' },
    {
      src: 'node_modules/reveal-code-focus/reveal-code-focus.js',
      async: true,
      callback: function() {
        RevealCodeFocus();
      }
    }
  ]
});

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

<section>
  <pre><code>
  // Useless comment.
  alert('hi');
  </pre></code>
  <p class="fragment" data-code-focus="1">
    When this fragment is shown, the first line of code (`span.line`) will have the `"focus"` class added to it.
  </p>
  <p class="fragment" data-code-focus="1-2">
    Another fragment. This time, both lines will now have the `"focus"` class.
  </p>
</section>

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.

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

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 */
/* … */

.line { display: block; }
/* on focused: switch to solarized light */
.line.focus { background: #fdf6e3; color: #657b83; }
.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
/* … */

Configuration

reveal-code-focus can be configured by passing in an options object.

// Configure `reveal-code-focus`.
RevealCodeFocus({
  // options
});

scrollToFocused

scrollToFocused automatically scrolls the <code> elements such that the lines of code to be focused on is centered. This is enabled by default.

RevealCodeFocus({
  scrollToFocused: false // default: true
});

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.

<span class="fragment"
  data-code-focus="1-5"
  data-code-block="2">
</span>

data-trim

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

<pre><code data-trim>

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

</code></pre>

Demo

View the live demo.

reveal-code-focus's Issues

Internal Links not working

Having internal links to certain fragments will not work with this plugin, since:
the code in updateCurrentSlide makes a call to

 while (Reveal.nextFragment()) {}

which will neglect fragment numbers. How can we fix that, I think, that the code is wrong, and we should only highlight the code up to the current fragment index,...

line indentations/breaks are somewhat broken for xml elements

With plugin:

Without plugin:

Support loading of file through URI. Tried using sampler which does this embedding of code but focus did not work.

I tried the following code
together with pluing sampler which allows "Embed code samples taken directly from source files in your slides."
The repo is available at https://github.com/ldionne/reveal-sampler
Would be nice if one can supply a URI to the actuall file either by file:// or http

        <section>
            <h2>Lets first Take a Look @ Important Dependencies!</h2>
            <pre data-cc="false">
                <code class="json" data-sample='package.json'></code>
            </pre>
            <!-- <p class="fragment" data-code-focus="13">dependencies</p> -->
            <!-- <p class="fragment" data-code-focus="23-24">angular-oauth2-oidc</p> -->
            <p class="fragment" data-code-focus="13">
                Dependencies block.
            </p>
            <p class="fragment" data-code-focus="23-24">
                add angular-oauth2-oidc version.
            </p>
            <p class="fragment" data-code-focus="13">
                Dependencies block.
            </p>
            <p class="fragment" data-code-focus="23-24">
                add angular-oauth2-oidc version.
            </p>
        </section>

Printing support

Add support for focusing on code when slides are printed.

Switch to Reveal.js v4’s new plugin system.

Does not bring in highlight.js

I followed your install instructions for npm, but this isn't bringing in the highlight.js. I think this used to be its own plugin, but I cannot find it.

Can I bring the two .js files into my project and follow the dependency instructions from there?

Code highlighted in single line

I'm trying to get the following slide to display properly but something is going terribly wrong.

<section data-markdown data-menu-title="Example 1: Conversion">
    <script type="text/template">
         ### Example 1: Conversion
                        
         ```bash
         $> conkit.convert example.mat ccmpred example.rr casprr
         ```
                        
         ```python
         >>> import conkit
         >>> conkit.io.convert('example.mat', 'ccmpred', 'example.rr', 'casprr')
         ```
    </script>
</section>

This does provide the correct color coding, but ignores line breaks.

Wrapping the code into <pre><code> ... </code></pre> tags yields the same result.

---

I'm using highlight.js v9.8.0 and the Tomorrow Night Eighties theme imported in the <head> of my index.html.

<link rel="stylesheet" href="bower_components/highlightjs/styles/tomorrow-night-eighties.css">

Demo site 404s

Scroll to focused code

I wanted to use this plugin with a very long block of code, so I added a feature to scroll the focused lines' container to center the focused lines. You can view my work so far at https://github.com/joshkel/reveal-code-focus/tree/scrolling.

Would you be interested in this feature? I think it would be better if I added smooth scrolling and if I checked from a single boolean, defaulting to false, to an options object (with only the centerFocused option for now), defaulting to on, but I wanted to run the overall concept and design by you first.

Partial line highlighting

Could we add support for partial line highlighting?

Suppose I had the following code block...

for(var i = 0; i<= 10; i++) {
}

I'd like to be able to highlight just the initializer (var i = 0;) using something like this:

<p class="fragment" data-code-focus="1" data-code-focus-columns="4-13">
  Commentary on initializer goes here
</p>

Add support for other package management systems

does not seem to work

When I have something linke this on the page:

It will be this after calling RevealCodeFocus():

I also tried the example in the README to make sure that this does not happen because it is XML. Though that should not be the problem, since it will be escaped before that happens:

            // Split highlighted code into lines.
            element.innerHTML =
                element.innerHTML
                .replace(/^(<[^>]+>)?/, function(_, html) {
                    if (html && ~html.indexOf('hljs-comment')) {
                        console.log(html.indexOf('comment'))
                        console.log(html)
                        return html + '<span class=line>';
                    } else {
                        return '<span class=line>' + (html ? html : '');
                    }
                })
                .replace(/\n\n/g, function() {
                    return '\n&nbsp;\n';
                })
                .replace(/\n/g, '</span><span class=line>') + '</span>';

I can't see the problem at first glance.

Add support for multiple code blocks in the same slide

Markdown generated code line breaks are removed

Using this plugin and markdown generated code doesn't work well. The code generated by markdown is displayed in one line and does not span multiple lines.

How to reproduce:

1. Clone the reveal.js project
2. Install reveal-code-focus plugin
3. Apply this patch to index.html:

diff --git a/index.html b/index.html
index 98accc3..3e5a887 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,12 @@
        <body>
                <div class="reveal">
                        <div class="slides">
-                               <section>Slide 1</section>
+                               <section data-markdown>
+                    ```C
+                    int x = 1;
+                    int y = 1;
+                    ```
+                </section>
                                <section>Slide 2</section>
                        </div>
                </div>

4. Present it

The code assigning the variables will be in the same line and not in two different lines.

Will be great if this plugin also adds lines numbers for code

Will be great if this plugin also has built-in lines numbers support for the code.

For now, I'm doing this via CSS:

code {
	counter-reset: line;
}
code > span {
	counter-increment: line;
}
code > span:before {
	content: counter(line);
	text-align: right;
	color: #555;
	/* border-right: 1px solid #555; */
	width: 40px;
	padding-right: 8px;
	margin-right: 8px;
	display: inline-block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select: none;
}

Thanks for amazing plugin!

How to install

This may be obvious but how do you add this to reveal? Anything special needed for the dependencies? May be nice to add to the README.md

Is there a way to highlight different lines on multiple code blocks simultaneously

It would be nice to be able to highlight different lines on different code blocks simulatenously, as I'm going over two variations of the same code in one slide.

I can mimic this by merging into one code block, of course, which I do now, but this would allow for even higher degree of freedom...

Is there a way to achieve this?

Add tests

Add demo