CodeBlock·component·@astryxdesign/core

Code Block

Fenced code block with syntax highlighting. Use for multi-line code snippets.

Open in Playground @astryxdesign/core/CodeBlock

Showcases and examples

6 documented examples

Code Block

A syntax-highlighted TypeScript code block with line numbers, a title bar, and a copy button.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · code-block-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {CodeBlock} from '@astryxdesign/core/CodeBlock';

const code = `import {useState, useEffect} from 'react';

export function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch(\`/api/users/\${id}\`)
      .then(res => res.json())
      .then(setUser);
  }, [id]);

  return user;
}`;

export default function CodeBlockShowcase() {
  return (
    <CodeBlock
      code={code}
      language="typescript"
      title="useUser.ts"
      hasLineNumbers
      hasCopyButton
    />
  );
}

Usage

CodeBlock renders syntax-highlighted code with line numbers, a copy button, and optional collapsible sections. Use CodeBlock for multi-line snippets like source files, terminal commands, and configuration examples. Use Code for inline references to function names, variables, or CLI flags within body text.

Set the language prop to match the code content so syntax highlighting is accurate. Use "plaintext" when the language is unknown.
Add a title when the code represents a file. It gives readers context and appears in the header bar alongside the copy button.
Use Code for short inline references like function names or CLI flags, and CodeBlock for standalone multi-line snippets.
Enable line numbers on short snippets (under 5 lines) where they add clutter without helping navigation.
Nest a code block inside a scrollable container. Use the maxHeight prop instead, which handles overflow natively.

Typed props

Prop	Type and behavior
`code`	`string` · required The code string to display.
`language`	`string` · default 'plaintext' Language for syntax highlighting. Use "plaintext" to disable.
`title`	`string` Filename or label shown in the header bar.
`hasLanguageLabel`	`boolean` · default true Show the language name in the header bar. Hidden when language is "plaintext".
`hasLineNumbers`	`boolean` · default false Show a line number gutter.
`highlightLines`	`number[]` 1-indexed line numbers to highlight.
`hasCopyButton`	`boolean` · default true Show a copy-to-clipboard button.
`onCopy`	`() => void` Callback after the code is copied.
`isWrapped`	`boolean` · default false Wrap long lines instead of enabling horizontal scroll.
`maxHeight`	`number \| string` Max height before the block scrolls vertically.
`size`	`'sm' \| 'md'` · default 'md' Text size variant.
`width`	`string` · default 'fit-content' Width of the code block. Any CSS width value. 'fit-content' (default) shrinks to longest line. '100%' fills parent width.
`container`	`'card' \| 'section'` · default 'card' Container presentation style. 'card' (default): border and radius with the muted syntax background for a standalone card look. 'section': no border or radius and a transparent background so the block blends into the card or panel it's embedded in.
`tokenizer`	`(code: string, language: string) => Array<{type: string; start: number; end: number}>` Custom tokenizer override for unsupported languages.
`syntaxTheme`	`SyntaxThemeDefinition` Per-instance syntax theme override. Shorthand for wrapping the block in <SyntaxTheme theme={...}>. Accepts a preset from @astryxdesign/core/theme/syntax or a theme created with defineSyntaxTheme(). Defaults to the nearest SyntaxTheme ancestor or the theme-level syntax colors.
`highlightMode`	`'auto' \| 'ranges' \| 'spans'` · default 'auto' Syntax highlighting rendering mode.
`isCollapsible`	`boolean` · default false Allow collapsing the code body into just the header bar. Starts expanded; the header becomes clickable to toggle. Only shows the toggle when the code exceeds collapsibleThreshold lines.
`collapsibleThreshold`	`number` · default 10 Minimum number of lines before the collapse toggle appears. Below this threshold the code block renders normally even when isCollapsible is true.
`xstyle`	`StyleXStyles` StyleX styles for layout customization. Must be a stylex.create() value.
`className`	`string` CSS class name for the root element. Prefer xstyle for styling.
`style`	`CSSProperties` Inline styles. Prefer xstyle for StyleX-optimized styling.
`data-testid`	`string` Test selector for automated testing frameworks.

Anatomy

Header Bar · optional

Shows the title, language label, and copy button. Appears when any of these props are set.

Line Numbers · optional

Numbered gutter along the left edge. Enable with hasLineNumbers.

Code Body · required

The syntax-highlighted code content.

Highlighted Lines · optional

Background accent on specific lines to draw attention.

Copy Button · optional

Copies the code string to the clipboard. Shown by default.

Theming

Targets

astryx-code

Visual props: color

astryx-code-block

Visual props: size, language, container

astryx-code-block-header

Visual props: size, language, container

astryx-code-block-title

Visual props: size, language

astryx-code-block-copy-button

astryx-codeblock

Visual props: size, language, container

Deprecated; use code-block.

astryx-codeblock-header

Visual props: size, language, container

Deprecated; use code-block-header.

astryx-codeblock-title

Visual props: size, language

Deprecated; use code-block-title.

astryx-codeblock-copy-button

Deprecated; use code-block-copy-button.

Variables

--_codeblock-gutter-width · private

Width of the line-number gutter, computed from the digit count of the last line so the code column starts at a stable offset.

Default: 2ch