Displaynew
Code Block
Displays a block of code with an optional header, language label, filename, and copy-to-clipboard button. Designed for rendering LLM-generated code output, API examples, and inline snippets.
LlmCodeBlockDemo
Live PreviewReact
greeting.ts
import { LlmButton } from '@atelier-ui/react';
export function GreetingButton({ name }: { name: string }) {
return (
<LlmButton variant="primary">
Hello, {name}!
</LlmButton>
);
}jsx
<LlmCodeBlock code="const x = 1;" language="typescript" />
<LlmCodeBlock code={tsCode} filename="app.ts" showLineNumbers={true} />
<LlmCodeBlock code={shellCmd} language="shell" />
<LlmCodeBlock code={jsonStr} filename="package.json" />API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | '' | The code string to display |
language | string | 'text' | Language label shown in the header. Ignored when filename is set. |
filename | string | '' | Optional filename shown in the header instead of the language label |
copyable | boolean | true | Whether to show a copy-to-clipboard button |
showLineNumbers | boolean | false | Whether to display line numbers alongside the code |
Import
ts
import { LlmCodeBlock } from '@atelier-ui/angular';