Line Numbers

Overview

The LineNumbers extension displays line numbers on the gutter element:

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

You can specify the start number:

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
If the white-space property is pre-wrap, each line can be broken into multiple lines. In this case, the Gutter extension resizes height of rows to correspond with lines. This works only if the code is highlighted by apply(), but does not work by html().

Usage

Register Gutter and LineNumbers extensions:

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


RyuseiLight.compose( { Gutter, LineNumbers } );
JavaScript

Or import the extension files:

<script src="path-to-the-file/gutter.min.js"></script>
<script src="path-to-the-file/line-numbers.min.js"></script>
HTML

Then, set the lineNumbers option to true:

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { lineNumbers: true } );


// or enables it as default:
const ryuseilight = new RyuseiLight( { lineNumbers: true } );
ryuseilight.apply( 'pre' );
JavaScript

If you specify a number instead of true, the line starts with it:

ryuseilight.apply( 'pre', { lineNumbers: 100 } );
JavaScript

Data Attribute

You can enable/disable line numbers, or specify the initial number by the data-rl-line-numbers data attribute. This value will overwrite options provided by the script.

<!-- Enables(or disables) line numbers -->
<pre data-rl-line-numbers="true"></pre>


<!-- Specifies a start number -->
<pre data-rl-line-numbers="10"></pre>
HTML