HighlightCompo Component

Key Features

✓ Copy to Clipboard - One-click code copying with visual feedback
✓ Auto Expand/Collapse - Automatically adds expand button for code over 18rem height
✓ Multi-Language - Supports JavaScript, TypeScript, JSON, YAML, Markdown, Svelte, and more
✓ Syntax Highlighting - Powered by highlight.js for accurate code coloring
✓ Optional Line Numbers - Add with numberLine=true
✓ Highlighted Lines - Emphasize specific lines with highlightedLines=[1,3,5]
✓ Language Tags - Show language label with langtag=true

JavaScript - Copy Functionality Demo

Try clicking the "Copy" button in the top-right corner. You'll see feedback: "✓ Copied!" or "✗ Failed"

const items = [
  { id: 1, title: 'Book', price: 12 },
  { id: 2, title: 'Pen', price: 3 },
  { id: 3, title: 'Laptop', price: 999 },
  { id: 4, title: 'Bag', price: 45 }
];

const titles = items.map((i) => i.title);
const prices = items.map((i) => i.price);
const expensive = items.filter((i) => i.price > 20);
const total = prices.reduce((a, b) => a + b, 0);
const capped = items.map((i) => ({ ...i, capped: i.price > 50 }));

console.log(titles);
console.log(prices);
console.log(expensive);
console.log(total);
console.log(capped);

<script lang="ts">
  import { HighlightCompo } from 'svelte-rune-highlight';
  import jsCode from '../../examples/jsCode?raw';
</script>

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

TypeScript - Type Definitions

Full TypeScript syntax highlighting support with interfaces, types, and generics

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

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

<script lang="ts">
  import { HighlightCompo } from 'svelte-rune-highlight';
  import tsCode from '../../examples/tsCode.ts?raw';
</script>

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

JSON - Configuration Example

Perfect for displaying API responses and configuration files

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

<script lang="ts">
  import { HighlightCompo } from 'svelte-rune-highlight';
  import jsonCode from '../../examples/jsonCode.json?raw';
</script>

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

YAML - Config Files

Great for CI/CD configs, Docker Compose, and deployment files

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

<script lang="ts">
  import { HighlightCompo } from 'svelte-rune-highlight';
  import yamlCode from '../../examples/yamlCode.yaml?raw';
</script>

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

Markdown - Documentation

Display formatted documentation with code blocks and syntax highlighting

# Hello World

This is a **markdown** document with:

- Lists
- Code blocks
- And more!

<script lang="ts">
  import { HighlightCompo } from 'svelte-rune-highlight';
  import mdCode from '../../examples/mdCode.md?raw';
</script>

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

Svelte - Component Examples

Show Svelte component code with runes, props, and reactive statements

<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 'svelte-rune-highlight';
  import svelteCode from '../../examples/svelteCode.svelte?raw';
</script>

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