Decorations

See the CSS reference for a list of CSS variables available for styling.

Overview

Gutter decorations

Renders a single unicode character somewhere near the line number colum.

type InputGutterDecoration = {
  readonly kind: "GUTTER";
  line: number; // where to render the decoration
  text: string; // which character to render
  data: Record<string, string>;
};

type InputGutterDecoration = {
  readonly kind: "GUTTER";
  line: number; // where to render the decoration
  text: string; // which character to render
  data: Record<string, string>;
};

Two gutter decorations count as equal when their data and text fields contain equal values. The default theme does not provide any presets for gutter decorations.

Line decorations

Renders up to two boxes (one in the text foreground, one in the background) across one or more entire lines.

type InputLineDecoration = {
  readonly kind: "LINE";
  fromLine: number; // line number to start at
  toLine: number; // line number to end at
  data: Record<string, string>;
};

type InputLineDecoration = {
  readonly kind: "LINE";
  fromLine: number; // line number to start at
  toLine: number; // line number to end at
  data: Record<string, string>;
};

Two line decorations count as equal when their data fields contain equal values. The default theme provides the presets ok and error for line decorations.

Default line decoration
"ok" line decoration
"error" line decoration

Text decorations

Decorate specific sections of code with backgrounds and/or underlines. Every text decoration renders up to four elements per decorated section. Going from the background to the foreground this can include:

1. A background backdrop layer
2. A background underline layer
3. A foreground backdrop layer
4. A foreground underline layer

The highlighted code is sandwiched between the background and foreground layers.

Text decorations follow the following type definition:

type InputGutterDecoration = {
  readonly kind: "TEXT";
  from: number; // where to start the decoration (code point offset)
  to: number; // where to end the decoration (code point offset)
  data: Record<string, string>;
};

type InputGutterDecoration = {
  readonly kind: "TEXT";
  from: number; // where to start the decoration (code point offset)
  to: number; // where to end the decoration (code point offset)
  data: Record<string, string>;
};

Two text decorations count as equal when their data fields contain equal values. The default theme provides the presets ok and error for text decorations.

Default text decoration
"ok" text decoration
"error" text decoration