Code.Movie

Decorations

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

Overview

kind Use Case Size/Placement Equality
"GUTTER" Draw gutter icon Line number data + text
"LINE" Decorate entire line(s) From line number to line number data
"TEXT" Decorate section of code From unicode offset to unicode offset data

Gutter decorations

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

type InputGutterDecoration = {
  readonly kind: "GUTTER";
  line: number; // where to render the decoration
  text: string; // which character to render
  data: Record<string, string>;
};
123456
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 built-in themes do 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>;
};
123456
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 built-in themes provide the presets ok and error for line decorations.

Default line decoration
"ok" line decoration
"error" line decoration
123
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>;
};
123456
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 The built-in themes provide the presets ok and error for text decorations.

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