Syntax highlighter

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

import { Button } from '@surflane/ui'

// Built from the same design tokens.
export function RunAction() {
  const count = 3
  return <Button disabled={count === 0}>Deploy service</Button>
}

Usage

Highlight source code in Platform Quiet, a dedicated code theme with neutral surfaces and low-chroma OKLCH colors. Keywords are purple, strings sage, functions and types blue, and numbers amber. Properties and punctuation stay neutral, and comments stay readable, without italics or faded opacity. For a copy action, use CodeBlock, which shares this highlighter.

• Don't present highlighting as code validation or an execution result. Report those separately instead.
• Don't inject HTML or execute the source. Pass it as a plain code string instead.
• Don't strip or auto-correct whitespace, line breaks, or Hangul text. Pass the original source unchanged instead.
• Don't expect every source to be highlighted. Unsupported languages, engine load failures, and sources over 50,000 characters stay plain text.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

labeled ScrollArea → pre → code → semantic token spans; inline mode returns only code

Keyboard and accessibility

The source keeps native text selection and copying. It scrolls horizontally in a ScrollArea. Setting wrap breaks lines visually without changing the source. Colors meet at least 4.5:1 in both themes and use the system text color in forced colors mode.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

// Highlighting needs shiki: npm install shiki
import { SyntaxHighlighter, CodeBlock } from '@surflane/ui'
import { SyntaxHighlighting } from '@surflane/ui/syntax-highlighting'

<SyntaxHighlighting>
  <SyntaxHighlighter code={source} language='tsx' label='Source preview' />
  <CodeBlock code={source} language='tsx' label='Copyable example' />
</SyntaxHighlighting>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens