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> ); }
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> ); }
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 } );
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>
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' );
If you specify a number instead of true
, the line starts with it:
ryuseilight.apply( 'pre', { lineNumbers: 100 } );
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>