Gutters

Gutters, typically seen as vertical lines on the left of an editor's text, serve to display line numbers, breakpoints, and other pertinent details.

Customizing the Gutter

You can tailor the gutter using both CSS and JavaScript.

CSS Customization

We recommend the following settings for the gutter, defining its background, text, and border colors:

#editor .gutter {
  background-color: #002b36;
  border-color: #93a1a1;
  color: #93a1a1;
}

Set the class the gutter uses by providing a class option to gutter:

const editor = createEditor('#editor', {
  gutter: {
    class: 'gutter'
  }
});

To customize the width of the gutter, use the Javascript API:

const editor = createEditor('#editor', {
  gutter: {
    width: '100px'
  }
});

JavaScript Customization

Beyond CSS, you can modify the gutter using JavaScript. This is achieved by providing a GutterCustomizer to the renderGutterLine option within gutter. This function lets you modify the GutterLineElement in the DOM, facilitating additions like breakpoints and other gutter features.

For additional details, including examples, refer to GutterCustomizer.