CodeBlock

CodeBlock presents source code in a readable, accessible block. It supports an optional header, language label, copy action, line numbers, highlighted lines, wrapping, themes, sizes, and constrained scrolling.

Basic usage

import { CodeBlock } from '@mosmox/ui';

<CodeBlock
  code={'const answer = 42;'}
  language="typescript"
  title="example.ts"
  showLineNumbers
/>

The component renders the supplied string inside a semantic pre/code structure. It never executes the supplied code. Basic syntax coloring is enabled by default and can be disabled with syntaxHighlight={false}.

Header and copy action

The header is shown by default whenever there is a title, language, or copy action. Set showHeader={false} for a compact code-only presentation. Copying uses the browser Clipboard API and calls onCopy after a successful copy.

<CodeBlock code={source} language="tsx" title="Button.tsx" onCopy={() => track('code-copied')} />
<CodeBlock code={source} copyable={false} showHeader={false} />

Customize accessible button labels with copyLabel and copiedLabel.

Lines, wrapping, and scrolling

<CodeBlock
  code={source}
  showLineNumbers
  highlightLines={[3, 4]}
  wrap
  maxHeight={240}
  tabSize={4}
/>

showLineNumbers adds non-selectable line numbers.
highlightLines accepts one-based line numbers and adds a visual emphasis background.
wrap allows long lines to wrap instead of scrolling horizontally.
maxHeight constrains the code viewport and enables vertical scrolling.
tabSize controls the visual width of tab characters.

Use lineNumberStart when the displayed snippet comes from a larger file. onLineClick makes each rendered line keyboard- and pointer-activatable and receives the displayed line number and source text.

<CodeBlock
  code={'const ready = true;\nreturn ready;'}
  showLineNumbers
  lineNumberStart={42}
  onLineClick={(lineNumber, sourceLine) => console.log(lineNumber, sourceLine)}
/>

Themes and sizes

theme accepts ten built-in themes: light, dark, black, github, solarized, dracula, nord, monokai, ocean, and high-contrast. size accepts sm, default, or lg and changes code typography. syntaxHighlight controls the built-in keyword, string, number, literal, and comment coloring.

<CodeBlock code="const compact = true;" size="sm" theme="light" />
<CodeBlock code="const readable = true;" size="lg" theme="dark" />

radius accepts a CSS length or a number interpreted as pixels.

ConfigProvider

Set defaults for a subtree with components.codeBlock. Instance props take precedence over provider values.

<ConfigProvider
  components={{
    codeBlock: {
      theme: 'github',
      copyable: false,
      fontSize: '14px',
      radius: '12px',
    },
  }}
>
  <CodeBlock code="export const ready = true;" language="tsx" />
</ConfigProvider>

Setting	Type	Default	Description
`copyable`	`boolean`	`true`	Shows the copy button by default.
`fontSize`	`string`	component default	Base code font size.
`radius`	`string`	`8px`	Default block radius.
`theme`	`CodeBlockTheme`	`dark`	Default color theme.

API Reference

Prop	Type	Default	Description
`code`	`string`	required	Source text to display.
`language`	`string`	—	Optional language label in the header.
`title`	`ReactNode`	—	Optional file name or custom header title.
`showHeader`	`boolean`	`true`	Shows the header when header content exists.
`showLineNumbers`	`boolean`	`false`	Shows one-based line numbers.
`lineNumberStart`	`number`	`1`	Number shown for the first rendered line.
`onLineClick`	`(lineNumber, code) => void`	—	Called when a line is clicked or activated with Enter/Space.
`highlightLines`	`number[]`	`[]`	Lines to highlight.
`wrap`	`boolean`	`false`	Wraps long lines.
`copyable`	`boolean`	provider value or `true`	Enables the copy action.
`copyLabel`	`string`	`Copy code`	Accessible label for the copy button.
`copiedLabel`	`string`	`Copied`	Temporary label after copying.
`onCopy`	`(code: string) => void`	—	Callback after a successful copy.
`size`	`sm \| default \| lg`	`default`	Code text size.
`theme`	`CodeBlockTheme`	provider value or `dark`	Color theme.
`syntaxHighlight`	`boolean`	`true`	Applies built-in syntax token colors.
`radius`	`number \| string`	provider value or `8px`	Block radius; numbers are pixels.
`maxHeight`	`number \| string`	—	Scroll viewport maximum height.
`tabSize`	`number`	`2`	Visual tab width.
`className`	`string`	—	Additional block class.
`style`	`CSSProperties`	—	Additional styles and CSS custom properties.

All standard HTMLAttributes<HTMLDivElement> are also supported, including id, data-*, and event handlers.

Accessibility

The copy control has an accessible label and changes its label after a successful copy. Line numbers are marked aria-hidden so screen readers read the source text without announcing duplicated numbering. The code is kept as text, preserving keyboard selection and copy behavior.

CodeBlock

Basic usageCopy Anchor Link

Header and copy actionCopy Anchor Link

Lines, wrapping, and scrollingCopy Anchor Link

Themes and sizesCopy Anchor Link

ConfigProviderCopy Anchor Link

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link