ArdoCodeBlock

On this page

Syntax-highlighted code block with copy button.

Pass the code as the code prop or as children. When children is a string, leading and trailing blank lines and the common indentation are stripped.

import { ArdoCodeBlock } from "ardo/ui"

<ArdoCodeBlock>{children}</ArdoCodeBlock>

Props

Name	Type	Required	Description
`code`	`string`	No	The code to display (as prop or as children string)
`language`	`string`	No	Programming language for syntax highlighting
`title`	`string`	No	Optional title shown above the code
`data-label`	`string`	No	Label used by CodeGroup tabs
`lineNumbers`	`boolean`	No	Show line numbers
`wrap`	`boolean`	No	Wrap long lines instead of scrolling sideways. Meant for prose, such as an agent prompt. Defaults to `true` for the `prompt` language.
`highlightLines`	`number[]`	No	Line numbers to highlight
`children`	`React.ReactNode`	No	Code as children — supports template literals with auto-outdent
`meta`	`string`	No	Native fence metadata used by the literal TSX prepass.
`__html`	`string`	No	Compatibility input for callers of the public HTML-returning highlightCode helper.

Props type: ArdoCodeBlockProps

<ArdoCodeBlock language="typescript">{`
  const x = 42
`}</ArdoCodeBlock>