Code Block
A beautiful syntax-highlighted code block with tabbed multi-file support and copy functionality.
Installation
Usage
import MultiCodeBlock from '$lib/registry/components/code-block/multi-code-block.svelte';<MultiCodeBlock
code={[
{ name: 'App.svelte', text: '<h1>Hello World</h1>', lang: 'svelte' },
{ name: 'utils.ts', text: 'export const greet = () => "Hello";', lang: 'typescript' }
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code | Code[] | [] | Array of code objects with name, text, and lang |
| class | string | '' | Additional CSS classes for custom styling |
Code Object
| Property | Type | Description |
|---|---|---|
| name | string | The tab name displayed at the top (e.g., filename) |
| text | string | The code content to be syntax highlighted |
| lang | string | The language for syntax highlighting (e.g., ‘svelte’, ‘typescript’, ‘javascript’) |
Features
- Tabbed Interface: Switch between multiple code files with a sleek tab design
- Syntax Highlighting: Powered by Shiki with the
vitesse-darktheme - Copy Button: Built-in copy functionality for easy code sharing
- Responsive: Handles overflow gracefully with horizontal scrolling