SyntaxHighlighter

Shiki-backed source-code presenter for Silvery React targets. It renders a plain first frame immediately, then upgrades to structured syntax tokens when the requested grammar is ready.

Import

import { SyntaxHighlighter } from "silvery"

Props

Prop	Type	Default	Description
language	string	required	Shiki language name or alias
code	string	required	Source text
theme	string	"github-dark"	Shiki theme
bare	boolean	false	Omit the framed surface and hover label
backgroundColor	string	unset	Background applied to every rendered token
bold	boolean	false	Force bold in addition to token-level styles
search	{ id?: string; scrollController: ScrollController }	unset	Register semantic source search and measured reveal

Usage

<SyntaxHighlighter language="typescript" code={source} />

Pass search inside a SearchProvider when a surrounding ScrollArea should search and reveal source lines. SyntaxHighlighter owns source matching and measured wrapped-line origins; the host supplies only the existing scroll controller and an optional routing id. When search is absent, no search hook, registration, or line measurement is created.

const controller = useScrollController()

<SearchProvider>
  <ScrollArea controller={controller}>
    <SyntaxHighlighter
      language="typescript"
      code={source}
      search={{ id: "source", scrollController: controller }}
    />
  </ScrollArea>
  <SearchBar />
</SearchProvider>

SyntaxHighlighter is for live React targets. For framework-neutral token data, filename inference, or raw one-shot ANSI output, use highlight, languageForPath, or highlightToAnsi from @silvery/syntax.

See Also

• Text -- styled text primitive
• CodeBlock -- semantic prose code blocks