Code Block

A beautiful syntax-highlighted code block with tabbed multi-file support and copy functionality.

Installation

Usage

import { MultiCodeBlock } from '$lib/components/ori/code-block';

<MultiCodeBlock
	code={[
		{ name: 'App.svelte', text: '<h1>Hello World</h1>', lang: 'svelte' },
		{ name: 'utils.ts', text: 'export const greet = () => "Hello";', lang: 'typescript' }
	]}
/>

<script lang="ts">
    const code = [
		{ name: 'App.svelte', text: '<h1>Hello World</h1>', lang: 'svelte' },
		{ name: 'utils.ts', text: 'export const greet = () => "Hello";', lang: 'typescript' }
	]
</script>

<MultiCodeBlock {code}>

Props

Prop	Type	Default	Description
code	Code[]	`[]`	Array of code objects with name, text, and lang
class	string	`''`	Additional CSS classes for custom styling
theme	string	`'vitesse-dark'`	The theme for syntax highlighting

Code Props

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-dark theme as default.
Copy Button: Built-in copy functionality for easy code sharing
Responsive: Handles overflow gracefully with horizontal scrolling