Line numbers

Add a line number gutter to renderables that provide line info, such as CodeRenderable and text editor components.

Basic usage

Renderable API

import {
  CodeRenderable,
  LineNumberRenderable,
  ScrollBoxRenderable,
  SyntaxStyle,
  RGBA,
  createCliRenderer,
} from "@opentui/core"

const renderer = await createCliRenderer()

const syntaxStyle = SyntaxStyle.fromStyles({
  default: { fg: RGBA.fromHex("#E6EDF3") },
})

const code = new CodeRenderable(renderer, {
  id: "code",
  content: "const x = 1\nconst y = 2\n",
  filetype: "typescript",
  syntaxStyle,
  width: "100%",
})

const lineNumbers = new LineNumberRenderable(renderer, {
  id: "code-lines",
  target: code,
  minWidth: 3,
  paddingRight: 1,
  fg: "#6b7280",
  bg: "#161b22",
})

const scrollbox = new ScrollBoxRenderable(renderer, {
  id: "scrollbox",
  width: 70,
  height: 18,
})

scrollbox.add(lineNumbers)
renderer.root.add(scrollbox)

Line signs and colors

Set a single background for a line, or split gutter and content colors separately with a LineColorConfig object:

// Shorthand: applies to both gutter and content
lineNumbers.setLineColor(3, "#2b6cb0")

// Split config: different gutter vs content background
lineNumbers.setLineColor(3, {
  gutter: "#2b6cb0",
  content: "#1f2937",
})

lineNumbers.setLineSign(3, { before: ">", beforeColor: "#2b6cb0" })

// Clear
lineNumbers.clearLineColor(3)
lineNumbers.clearLineSign(3)

Theming the gutter

Gutter text and background colors accept assignments after construction:

lineNumbers.fg = "#6b7280"
lineNumbers.bg = "#161b22"

Assign undefined to reset to the defaults (#888888 foreground, transparent background).

Construct API

Not available yet. Use LineNumberRenderable for now.

Properties

Methods