Active Lines

Overview

The ActiveLines component highlights specified lines:

<div class="container">
  <button class="button button--primary">
    Click Me
  </button>
</div>
HTML

It works with the LineNumbers component:

export default function Layout( { children, hasFooter = true } ) {
  return (
    <div className={ styles.layout }>
      <NavigationBar/>


      <main id="main" className={ styles.layoutContent }>
        { children }
      </main>


      { hasFooter && <Footer/> }
    </div>
  );
}
JSX

Usage

Register the ActiveLines component:

import { RyuseiLight, ActiveLines } from '@ryusei/light';


RyuseiLight.compose( { ActiveLines } );
JavaScript

Or import the file:

<script src="path-to-the-file/active-lines.min.js"></script>
HTML

Lines to highlight can be specified by options as an array:

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { activeLines: [ 5, [ 8, 10 ] ] } );
JavaScript

Pass numbers for single lines to highlight, or arrays for ranges. For example, [ 2, 5 ] highlights line 2 and 5, but [ [ 2, 5 ] ] highlights lines from 2 to 5.

Data Attribute

You can specify active lines by the data-rl-active-lines data attribute. This value will overwrite options provided by the script.

<pre data-rl-active-lines="[5, [8, 10]]">
  write code here
</pre>
HTML