HighlightCompo Component

A Svelte component for syntax highlighting with copy-to-clipboard functionality, expandable code blocks, and support for multiple languages (Svelte, TypeScript, JavaScript, JSON, YAML, Markdown). Features automatic library import replacement and responsive overflow detection.

Features

✅ One-click code copying with visual feedback
✅ Automatically detects overflow and adds expand/collapse
✅ Svelte, TypeScript, JavaScript, JSON, YAML, Markdown
✅ Automatically replaces $lib imports for documentation
✅ Shows error state if copy fails
✅ ARIA labels and keyboard support
✅ Automatic dark mode support

Props

Prop	Type	Default	Description
code	string	required	Code to highlight
lang	SupportedLanguage	"svelte"	Language: "svelte", "ts", "js", "json", "yaml", "md"
contentClass	string	"overflow-hidden"	CSS class for content wrapper
class	string	undefined	CSS class for outer container
replaceLib	string \| false	"svelte-rune-highlight"	Replace $lib imports or disable with false
showCopy	boolean	true	Show or hide the copy button

Examples

Svelte

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Count: {count}
</button>

<style>
  button {
    padding: 4px;
    border: 2px solid blue;
    margin: 8px;
    border-radius: 10px;
  }
</style>

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import svelteCode from '../../examples/svelteCode.svelte?raw';
</script>

<HighlightCompo code={svelteCode} showCopy={false} />

JavaScript

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const userNames = users.map((u) => u.name);
console.log(userNames);

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import jsCode from '../../examples/jsCode?raw';
</script>

<HighlightCompo code={jsCode} lang="js" showCopy={false} />

JSON

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "svelte": "^5.0.0"
  }
}

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import jsonCode from '../../examples/jsonCode.json?raw';
</script>

<HighlightCompo code={jsonCode} lang="json" showCopy={false} />

Markdown

# Hello World

This is a **markdown** document with:

- Lists
- Code blocks
- And more!

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import mdCode from '../../examples/mdCode.md?raw';
</script>

<HighlightCompo code={mdCode} lang="md" showCopy={false} />

TypeScript

interface User {
  id: number;
  name: string;
  email: string;
}

function getUser(id: number): User {
  return { id, name: 'John', email: 'john@example.com' };
}

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import tsCode from '../../examples/tsCode.ts?raw';
</script>

<HighlightCompo code={tsCode} lang="ts" showCopy={false} />

YAML

name: my-app
version: 1.0.0
dependencies:
  svelte: ^5.0.0
  typescript: ^5.0.0

<script lang="ts">
  import { HighlightCompo } from '$lib';
  import yamlCode from '../../examples/yamlCode.yaml?raw';
</script>

<HighlightCompo code={yamlCode} lang="yaml" showCopy={false} />