Svelte Highlight

Svelte Highlight is an open-source Tool for Svelte developers that brings highlight.js syntax highlighting to any Svelte app through drop-in components, a build-time preprocessor, and CSS-variable theming.

What is Svelte Highlight?

Svelte Highlight is a Svelte component library that renders highlighted code blocks from plain text and a language grammar. It accepts code and language as props and outputs marked-up HTML with standard hljs-* classes, and it can also pre-render at build time so highlight.js never loads in the browser. The package is published on npm and maintained by metonym on GitHub, with documentation hosted at svhe.onrender.com.

It provides multiple entry points: the default Highlight component, HighlightAuto for language guessing, HighlightSvelte for Svelte syntax, and HighlightEditable for contenteditable code editing. All components accept CSS custom properties for styling, and a highlight action progressively enhances existing markup. The library supports a long list of language grammars imported from svelte-highlight/languages, and both a modern themes path (ThemePalette objects) and a legacy styles string path.

Key Features

• Runtime components — Highlight, HighlightAuto, HighlightSvelte, and HighlightEditable take code and a language object and render syntax-highlighted HTML using highlight.js.
• ThemePalette system — every highlight.js theme is compiled into typed --shl-* CSS variables; defineTheme, extendTheme, and paletteToCss create or derive palettes, and fromTextMate imports VS Code/TextMate JSON themes.
• Static preprocessor — svelte-highlight/static replaces eligible <Highlight> usages with pre-rendered HTML at build time, eliminating highlight.js and the grammar module from the client bundle.
• Editable editor — HighlightEditable reruns highlighting on every edit, supports Enter, Tab/Shift+Tab indentation, undo/redo with a configurable history limit (default 200), and exposes an imperative API with undo, redo, indent, selectAll, setCode, and more.
• Composable UI pieces — LineNumbers, CopyButton, CodeWindow, and Typewriter slot into Highlight for line numbers, copy-to-clipboard, window chrome, and typewriter animation.
• Streaming support — HighlightStream re-highlights a growing code buffer as chunks arrive, aimed at LLM chat output.
• CSS variable styling — the container, line numbers, copy button, language tag, and code window all expose --shl-* or --copy-*, --langtag-*, --window-* style props.

Who is it for?

• Svelte developers building documentation sites, blogs, or code galleries that need highlighted code blocks with line numbers and copy buttons.
• LLM chat application developers who need to render streaming code responses with HighlightStream.
• Teams shipping static or server-rendered sites who want zero client-side highlighting cost through the svelte-highlight/static preprocessor.
• Developers creating in-browser code sandboxes or editors who can leverage HighlightEditable with undo/redo and keyboard indentation.

What can you do with Svelte Highlight?

• Build a documentation site: add Highlight with a language import and theme CSS to show code samples; compose LineNumbers and CopyButton for a polished reading experience.
• Render LLM streaming output: feed chunks into HighlightStream with done set when the stream ends, and every incoming token is highlighted as it arrives.
• Create an editable code demo: use HighlightEditable with bind:code to let users edit code live and see re-highlighted output on each change.
• Optimize bundle size: apply the highlightStatic preprocessor in vite.config.js to pre-render static code blocks; dynamic usages fall back to runtime components.

How does Svelte Highlight work?

Install it with npm i svelte-highlight, then import Highlight and a language grammar and render <Highlight language={typescript} {code} />. For global themes, import svelte-highlight/themes/base.css plus a theme CSS file; for scoped theming, wrap the component in HighlightStyle with a ThemePalette. A static preprocessor in svelte-highlight/static can replace known static usages at build time.

Pros and cons

Pros:

• Both runtime components and a build-time static preprocessor are available, so you can choose where highlighting work happens.
• Theming with CSS variables means themes are data, SSR-safe, and overridable per instance with Svelte style props.
• The library ships many languages and themes, plus tools to import VS Code themes.

Cons:

• Auto-highlighting (HighlightAuto) increases the client bundle size, as the README warns; specifying a language is recommended.
• The experimental CSS Custom Highlight engine (engine="css-highlights") only works in Chrome 105+, Safari 17.2+, and Firefox 140+, and silently falls back to the DOM engine elsewhere.
• The static preprocessor only triggers on plain identifier language imports and string-literal code; dynamic cases stay with the runtime component.

Alternatives

• Shiki — a syntax highlighter that uses TextMate grammars and VS Code themes.
• Prism — a lightweight, extensible syntax highlighter used by many static site generators.

Pricing

Svelte Highlight is free and open source; the package is distributed on npm with no paid tiers.

FAQ

Is Svelte Highlight free?

Yes. svelte-highlight is an open-source package available on npm; there are no paid tiers or licensing fees.

What languages does Svelte Highlight support?

The repository includes a long list of supported grammars imported from svelte-highlight/languages; the full catalog is documented in SUPPORTED_LANGUAGES.md, and loadLanguage can dynamically import a grammar by name.

How do I switch between light and dark themes?

The HighlightStyle component accepts light and dark theme strings or palettes, with a mode prop that defaults to auto (prefers-color-scheme), or can be forced to light/dark or a CSS selector string for manual control.

Does the static preprocessor work with dynamic code?

No. The svelte-highlight/static preprocessor only replaces <Highlight> usages where language is a statically imported identifier and code is a string literal or non-interpolated template literal. Dynamic code, loadLanguage, HighlightAuto, HighlightSvelte, and HighlightEditable remain runtime components.