전체 카탈로그
ContentCodeBlock20 props

Code Block

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 ...

공식 문서 열기
live previewContent

Preview

tsx
import {Button} from '@astryxdesign/core/Button';
​
<Button label="Save changes" variant="primary" />

Import

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

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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 ...

codesyntaxhighlightsnippetprismshikipremonospace

Important props

maxHeightnumber | stringoptional
sizesm | mdoptional
containercard | sectionoptional

Theming targets

astryx-codeastryx-codeblock

Best practices

  • DoSet the language prop to match the code content so syntax highlighting is accurate. Use "plaintext" when the language is unknown.
  • DoAdd a title when the code represents a file. It gives readers context and appears in the header bar alongside the copy button.
  • DoUse Code for short inline references like function names or CLI flags, and CodeBlock for standalone multi-line snippets.
  • Do notEnable line numbers on short snippets (under 5 lines) where they add clutter without helping navigation.