CodeBlock
The CodeBlock component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple code generation tool using the streamObject function from the AI SDK.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/codegen/+server.ts
Features
- Syntax highlighting with Shiki
- Line numbers (optional)
- Copy to clipboard functionality
- Automatic light/dark theme switching
- Customizable styles
- Accessible design
Props
Code
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | - | The code string to syntax highlight and display (required) |
lang | SupportedLanguage | 'typescript' | Programming language for syntax highlighting |
variant | 'default' | 'ghost' | 'default' | Visual style variant of the code block |
hideLines | boolean | false | Whether to hide line numbers |
highlight | (number | [number, number])[] | [] | Array of line numbers or ranges to highlight (e.g., [1, [3, 5], 7]) |
class | string | - | Additional CSS classes to apply to the code container |
children | Snippet | - | Child components (typically CodeCopyButton or CodeOverflow) |
ref | HTMLDivElement | - | Bindable reference to the code container element |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
CodeCopyButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | ButtonProps['variant'] | 'ghost' | Button variant style |
size | ButtonProps['size'] | 'icon' | Button size |
class | string | - | Additional CSS classes to apply to the copy button |
ref | HTMLButtonElement | - | Bindable reference to the button element |
...restProps | CopyButtonProps | - | All other CopyButton component props are supported |
CodeOverflow
| Prop | Type | Default | Description |
|---|---|---|---|
collapsed | boolean | true | Whether the code block is collapsed (bindable) |
class | string | - | Additional CSS classes to apply to the overflow container |
children | Snippet | - | Code content to render with overflow control |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |