Gutter

Overview

The Gutter component creates a gutter on the left side of the editor, and displays line numbers.

Usage

Register the Gutter component:

import { RyuseiCode, Gutter } from '@ryusei/code';

RyuseiCode.compose( { Gutter } );
JavaScript

import { RyuseiCode, Gutter } from '@ryusei/code';


RyuseiCode.compose( { Gutter } );

or import the file:

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

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

Options

Set an object to gutter to update default options, or false to deactivate it.

new RyuseiCode( { gutter: { ... } } );

// or
new RyuseiCode( { gutter: false } );
JavaScript

new RyuseiCode( { gutter: { ... } } );


// or
new RyuseiCode( { gutter: false } );

selectLine

Determines whether to select a line when users click a line number.

type: boolean default: true

start

Specifies the start number.

type: number default: 1

sticky

Determines whether to set the gutter position to sticky or not. This does not work in IE because it does not support position: sticky.

type: boolean default: true