CodeBlock
Syntax-highlighted code display with copy button, line numbers, and filename header.
Installation
Examples
TypeScript example
With filename header, line numbers, and copy button.
Button.tsx
1import React from "react";
2
3export function Button(props) {
4 return (
5 <button className="btn">{props.children}</button>
6 );
7}
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| code* | string | required | Source code to display. |
| language | string | — | Language hint for syntax highlighting. |
| showLineNumbers | boolean | false | Shows line number gutter. |
| filename | string | — | Filename shown in the header bar. |
| caption | string | — | Optional caption below the block. |