Reveal.js Code block Line Numbers

Overview

A 'library' for adding line numbers to code stylized using highlight.js in a Reveal.js presentation.

See a live example

To learn more about this library, read my blog post about writing it.

Dependencies

This library depends on using Highlight.js in your Reveal.js presentation.

File placement

Place these files into 'plugin/line-numbers/';

Adding library to presentation

To use this library in a Reveal.js presentation, you need to add the 'line-numbers.js' to the list of dependencies in 'Reveal.initialize'.

Reveal.initialize({
  dependencies: [
   // ...
    {src: 'plugin/line-numbers/line-numbers.js'}
    // ...
  ]
})

Usage

Adding line numbers to code blocks

To add line numbers to a code block, just add the class 'line-numbers' to the <code> element

<pre><code class="line-numbers">
/**
 * Example Code.
 */
function my_example_code($line_numbers = TRUE) {
  $message = 'This example code does';
  $message .= ($line_numbers ? '' : ' not');
  $message .= ' have line numbers.';

  return $message;
}

print my_example_code(TRUE);
</code></pre>

Starting line-numbers from other number than 1

To make the line numbers start at a different number than 1, you can add an inline style to the <code> element which sets the CSS variable --line-numbers-init to its initial value.

<pre><code class="line-numbers" style="--line-numbers-init: 42">
/**
 * Example Code.
 */
function my_example_code($line_numbers = TRUE) {
  $message = 'This example code does';
  $message .= ($line_numbers ? '' : ' not');
  $message .= ' have line numbers starting at 42.';

  return $message;
}

print my_example_code(TRUE);
</code></pre>

Highlighting line numbers.

To highlight particular line numbers in a code block, add the attribute 'data-highlight-lines' to the <code> element.

• Seperate the lines you would like to highlight with a comma(,).
• Specifcy a group of lines to highlight by seperating the start line and end line with a dash(-).

Example: to highlight the lines 1,2,3:

<pre><code class="line-numbers" data-highlight-lines="1,2,3">
/**
 * Example Code.
 */
function my_example_code($line_numbers = TRUE) {
  $message = 'This example code does';
  $message .= 'Will have line numbers';
  $message .= 'and will have highlighed line numbers.';

  return $message;
}

print my_example_code(TRUE);
</code></pre>

Example: To highlight the lines 4 to 10:

<pre><code class="line-numbers" data-highlight-lines="4-10">
/**
 * Example Code.
 */
function my_example_code($line_numbers = TRUE) {
  $message = 'This example code does';
  $message .= 'Will have line numbers';
  $message .= 'and will have highlighed line numbers.';

  return $message;
}

print my_example_code(TRUE);
</code></pre>

Example: highlighting lines 1 to 3 and 5,7,9:

<pre><code class="line-numbers" data-highlight-lines="1-3,5,7,9">
/**
 * Example Code.
 */
function my_example_code($line_numbers = TRUE) {
  $message = 'This example code does';
  $message .= 'Will have line numbers';
  $message .= 'and will have highlighed line numbers.';

  return $message;
}

print my_example_code(TRUE);
</code></pre>