行号

为提供行信息的 Renderable（如 CodeRenderable 和文本编辑器组件）添加行号栏。

基本用法

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)

行标记与颜色

为某一行设置统一的背景色，或通过 LineColorConfig 对象分别设置行号栏和内容区域的颜色：

// 简写：同时应用于行号栏和内容区域
lineNumbers.setLineColor(3, "#2b6cb0")

// 分别配置：行号栏和内容区域使用不同的背景色
lineNumbers.setLineColor(3, {
  gutter: "#2b6cb0",
  content: "#1f2937",
})

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

// 清除
lineNumbers.clearLineColor(3)
lineNumbers.clearLineSign(3)

行号栏主题定制

行号栏的文本颜色和背景颜色支持在构建后进行赋值：

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

赋值 undefined 可恢复为默认值（#888888 前景色，透明背景）。

Construct API

暂未提供。目前请使用 LineNumberRenderable。

属性

方法