CodeBlock
Display code with expand/collapse functionality
CodeBlock displays code with optional syntax highlighting, line numbers, and a "Show more" button for long code blocks that exceed the max height.
Preview
example.ts
function processData(data: DataPoint[]) {
const normalized = data.map(point => ({
x: point.x / maxX,
y: point.y / maxY,
...Import
import
import { CodeBlock } from '@ash-cloud/ash-ui';Usage
CodeDisplay.tsx
import { CodeBlock } from '@ash-cloud/ash-ui';
function CodeDisplay() {
const code = `function hello() {
console.log("Hello, world!");
}`;
return (
<CodeBlock
language="typescript"
maxHeight={200}
showLineNumbers
>
{code}
</CodeBlock>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The code to display |
| language | string | undefined | Language for syntax highlighting |
| maxHeight | number | 300 | Max height before "Show more" appears |
| showLineNumbers | boolean | false | Display line numbers |
| className | string | undefined | Additional CSS classes |
Features
Expand/Collapse
Long code blocks show a "Show more" button
Scrollable
Horizontal scrolling for long lines
Line Numbers
Optional line number display
Syntax Highlighting
Language-aware code coloring