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

TypeScript, Svelte, Bash, JSON, and CSS

Copy Button

Add a copy-to-clipboard button with showCopyButton.

Highlight Lines

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

Custom Highlight Color

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

Line Numbers

Display line numbers with showLineNumbers.

Full Featured

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

Shared Blocks

Render multiple code blocks together for related snippets.

Internationalization

Customize copy button labels with the labels prop.

Svelte Example

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