CodeHighlighted
kumo-svelte

CodeHighlighted

Syntax-highlighted code blocks powered by Shiki and styled with Kumo colors.

const greeting = "Hello, World!";
console.log(greeting);
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted
  code={`const greeting = "Hello, World!";
console.log(greeting);`}
  lang="typescript"
/>

Installation

CodeHighlighted is available from the main package and from the granular code-highlighted entry point.

Barrel

import { CodeHighlighted } from 'kumo-svelte';

Granular

import { CodeHighlighted } from 'kumo-svelte/components/code-highlighted';

Usage

<script lang="ts">  import { CodeHighlighted } from 'kumo-svelte';  const code = `const status = 'ready';`;</script><CodeHighlighted {code} lang="ts" showCopyButton />

Overview

A Shiki-powered syntax highlighter. Supports common languages with TextMate grammars, dual light/dark themes, and Kumo-styled copy controls.

Examples

Languages

CodeHighlighted supports common Shiki languages. Only use the languages you need.

Basic

const greeting = "Hello, World!";
console.log(greeting);
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted
  code={`const greeting = "Hello, World!";
console.log(greeting);`}
  lang="typescript"
/>

TypeScript, Svelte, Bash, JSON, and CSS

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

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
<script lang="ts">
  let count = $state(0);
</script>

<button onclick={() => count += 1}>
  Count: {count}
</button>
# Install Kumo Svelte
npm install kumo-svelte

# Or with pnpm
pnpm add kumo-svelte

# Start development server
pnpm dev
{
  "name": "kumo-svelte",
  "version": "1.0.0",
  "dependencies": {
    "shiki": "^3.0.0",
    "svelte": "^5.0.0"
  }
}
.button {
  background: var(--color-brand);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;

  &:hover {
    background: var(--color-brand-hover);
  }
}
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const svelteCode = `<script lang="ts">
  let count = $state(0);
<` + `/script>

<button onclick={() => count += 1}>
  Count: {count}
</button>`;
</script>

<div class="grid gap-4 md:grid-cols-2">
  <CodeHighlighted
    code={`interface User {
  id: string;
  name: string;
  email: string;
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(\`/api/users/\${id}\`);
  return response.json();
}`}
    lang="typescript"
  />
  <CodeHighlighted
    code={svelteCode}
    lang="svelte"
  />
  <CodeHighlighted
    code={`# Install Kumo Svelte
npm install kumo-svelte

# Or with pnpm
pnpm add kumo-svelte

# Start development server
pnpm dev`}
    lang="bash"
  />
  <CodeHighlighted
    code={`{
  "name": "kumo-svelte",
  "version": "1.0.0",
  "dependencies": {
    "shiki": "^3.0.0",
    "svelte": "^5.0.0"
  }
}`}
    lang="json"
  />
  <CodeHighlighted
    code={`.button {
  background: var(--color-brand);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;

  &:hover {
    background: var(--color-brand-hover);
  }
}`}
    lang="css"
  />
</div>

Copy Button

Add a copy-to-clipboard button with showCopyButton.

npm install kumo-svelte
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted code="npm install kumo-svelte" lang="bash" showCopyButton />

Highlight Lines

Emphasize specific lines with highlightLines. Line numbers are 1-indexed.

function processData(items: string[]) {
  // Filter out empty items
  const filtered = items.filter(Boolean);

  // Transform to uppercase (highlighted)
  const transformed = filtered.map((item) => item.toUpperCase());

  // Return sorted result
  return transformed.toSorted();
}
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted
  code={`function processData(items: string[]) {
  // Filter out empty items
  const filtered = items.filter(Boolean);

  // Transform to uppercase (highlighted)
  const transformed = filtered.map((item) => item.toUpperCase());

  // Return sorted result
  return transformed.toSorted();
}`}
  lang="typescript"
  highlightLines={[5, 6]}
/>

Custom Highlight Color

Customize the highlight color with the --kumo-code-highlight-bg CSS variable.

function greet(name: string) {
  // This line is highlighted
  console.log(`Hello, ${name}!`);

  return name.toUpperCase();
}
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted
  code={`function greet(name: string) {
  // This line is highlighted
  console.log(\`Hello, \${name}!\`);

  return name.toUpperCase();
}`}
  lang="typescript"
  highlightLines={[2, 3]}
  style="--kumo-code-highlight-bg: hsla(220, 80%, 50%, 0.1)"
/>

Line Numbers

Display line numbers with showLineNumbers.

<script lang="ts">
  let size = $state({ width: 0, height: 0 });

  function handleResize() {
    size = {
      width: window.innerWidth,
      height: window.innerHeight
    };
  }

  $effect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });
</script>
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const svelteCode = `<script lang="ts">
  let size = $state({ width: 0, height: 0 });

  function handleResize() {
    size = {
      width: window.innerWidth,
      height: window.innerHeight
    };
  }

  $effect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });
<` + `/script>`;
</script>

<CodeHighlighted code={svelteCode} lang="svelte" showLineNumbers />

Combine line numbers, highlighted lines, and a copy button for a complete code display.

<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  interface Props {
    code: string;
    language?: 'svelte' | 'typescript' | 'bash' | 'json';
  }

  let { code, language = 'typescript' }: Props = $props();
</script>

<CodeHighlighted
  {code}
  lang={language}
  showCopyButton
  showLineNumbers
  highlightLines={[10, 11, 12, 13, 14]}
/>
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const svelteCode = `<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  interface Props {
    code: string;
    language?: 'svelte' | 'typescript' | 'bash' | 'json';
  }

  let { code, language = 'typescript' }: Props = $props();
<` + `/script>

<CodeHighlighted
  {code}
  lang={language}
  showCopyButton
  showLineNumbers
  highlightLines={[10, 11, 12, 13, 14]}
/>`;
</script>

<CodeHighlighted
  code={svelteCode}
  lang="svelte"
  showCopyButton
  showLineNumbers
  highlightLines={[10, 11, 12, 13, 14]}
/>

Shared Blocks

Render multiple code blocks together for related snippets.

const config = { theme: "dark" };
npm run build
{ "success": true }
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<div class="space-y-4">
  <CodeHighlighted code={`const config = { theme: "dark" };`} lang="typescript" />
  <CodeHighlighted code={`npm run build`} lang="bash" />
  <CodeHighlighted code={`{ "success": true }`} lang="json" />
</div>

Internationalization

Customize copy button labels with the labels prop.

pnpm add kumo-svelte
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';
</script>

<CodeHighlighted
  code={`pnpm add kumo-svelte`}
  lang="bash"
  showCopyButton
  labels={{ copy: 'Copy command', copied: 'Copied command' }}
/>

Svelte Example

<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const code = `const x = 1;`;
</script>

<CodeHighlighted {code} lang="ts" />
<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const svelteCode = `<script lang="ts">
  import { CodeHighlighted } from 'kumo-svelte';

  const code = \`const x = 1;\`;
<` + `/script>

<CodeHighlighted {code} lang="ts" />`;
</script>

<CodeHighlighted
  code={svelteCode}
  lang="svelte"
  showCopyButton
/>

Themes

CodeHighlighted uses fixed themes for visual consistency across Kumo Svelte applications:

  • Light mode: github-light
  • Dark mode: vesper

Bundle Size

Shiki is used only by CodeHighlighted and docs code blocks. Applications that do not render CodeHighlighted avoid the syntax-highlighting work for this component.

Migration from Code and CodeBlock

Use CodeHighlighted for syntax-highlighted blocks. Keep Code for inline code and simple text snippets.

<!-- Before --><CodeBlock code="const x = 1;" lang="ts" /><!-- After --><CodeHighlighted code="const x = 1;" lang="ts" />

API Reference

PropTypeDefaultDescription
code *string-Code string to render.
lang CodeHighlightedLang"typescript"Code language.
highlightLines number[][]One-indexed line numbers to emphasize.
showLineNumbers booleanfalseDisplays line numbers.
showCopyButton booleanfalseShows the copy button.
labels { copy?: string; copied?: string }-Accessible copy button labels.
class string-Additional classes merged onto the root element.
style string-Inline style string.