Snippet

import { InlineCode, Snippet } from '@hanzo/ui'

Default

A bordered panel with a filename, a language badge, numbered lines, one highlighted, and a copy button.

fibonacci.ts

typescript

1function fibonacci(n: number): number {

2 if (n <= 1) return n

3 return fibonacci(n - 1) + fibonacci(n - 2)

6console.log(fibonacci(10))

export function Default() {
  return (
    <Snippet
      code={FIBONACCI}
      language="typescript"
      filename="fibonacci.ts"
      showLineNumbers
      highlightLines={[3]}
    />
  )
}

Themes

The same code on six fixed syntax surfaces, independent of the page's own theme.

const greet = (name: string) => `Hello, ${name}!`

export function Themes() {
  const code = `const greet = (name: string) => \`Hello, \${name}!\``
  return (
    <YStack gap="$3">
      <Snippet code={code} language="ts" theme="dark" />
      <Snippet code={code} language="ts" theme="light" />
      <Snippet code={code} language="ts" theme="github" />
      <Snippet code={code} language="ts" theme="github-dark" />
      <Snippet code={code} language="ts" theme="terminal" />
      <Snippet code={code} language="ts" theme="retro" />
    </YStack>
  )
}

Expandable and minimal

A tall file clamped to `collapsedHeight` until Expand is pressed, next to the borderless variant.

log.txt

text

1line 1

2line 2

3line 3

4line 4

5line 5

6line 6

7line 7

8line 8

9line 9

10line 10

11line 11

12line 12

13line 13

14line 14

15line 15

16line 16

17line 17

18line 18

19line 19

20line 20

line 1

line 2

line 3

line 4

line 5

line

export function ExpandableAndMinimal() {
  const long = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join("\n")
  return (
    <YStack gap="$4">
      <Snippet
        code={long}
        language="text"
        filename="log.txt"
        showLineNumbers
        expandable
        collapsedHeight={120}
        maxHeight={480}
      />
      <Snippet code={long.slice(0, 40)} language="text" variant="minimal" />
    </YStack>
  )
}

Inline

`InlineCode` drops a short code phrase into a sentence with no panel or gutter.

Run npm install @hanzo/ui to add the package, then import Snippet from it.

export function Inline() {
  return (
    <Paragraph>
      <Text>Run </Text>
      <InlineCode language="bash">npm install @hanzo/ui</InlineCode>
      <Text> to add the package, then import </Text>
      <InlineCode language="ts">Snippet</InlineCode>
      <Text> from it.</Text>
    </Paragraph>
  )
}

Types

export type SnippetVariant = 'default' | 'inline' | 'minimal'

export type SnippetTheme = 'dark' | 'light' | 'github' | 'github-dark' | 'terminal' | 'retro'

export type SnippetSize = 'xs' | 'sm' | 'default' | 'lg'

export interface SnippetProps extends Omit<ComponentProps<'div'>, 'children'> {
  code: string
  language?: string
  filename?: string
  variant?: SnippetVariant | null
  theme?: SnippetTheme | null
  size?: SnippetSize | null
  showLineNumbers?: boolean
  highlightLines?: number[]
  showCopyButton?: boolean
  showLanguageBadge?: boolean
  showHeader?: boolean
  /** The expanded body's ceiling, in px or any CSS length. */
  maxHeight?: number | string
  expandable?: boolean
  /** The collapsed body's height while `expandable` and not yet expanded. */
  collapsedHeight?: number | string
  wrapLines?: boolean
  startLineNumber?: number
}

export interface InlineCodeProps extends Omit<SnippetProps, 'variant' | 'code'> {
  children: string
}

Exports

InlineCodeSnippettype InlineCodePropstype SnippetPropstype SnippetSizetype SnippetThemetype SnippetVariant