Svelte Rune Highlight

DEMO

Syntax highlighting for Svelte using highlight.js. This lib is ported from Svelte-Highlight.

📦 v2.0 Breaking Changes
Tailwind CSS classes have been removed from library components. The library is now completely CSS framework-agnostic.
See MIGRATION.md for upgrade instructions.

Installation

pnpm i -D svelte-rune-highlight highlight.js

Then in +layout.svelte

<script lang="ts">
    // select your faviroite scheme from https://highlightjs.org/demo
    import 'highlight.js/styles/github-dark.css';
</script>

or use directly from cdnjs

<svelte:head>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/dark.min.css"
    />
</svelte:head>

Docs

Docs

Highlight component

Highlight

HighlightAuto component

HighlightAuto

HighlightSvelte component

HighlightSvelte

Line numbers

Line numbers

HighlightCompo Component

HighlightCompo Component

Wrappers

Wrappers

Theme Selector

Theme Selector

Development

Testing

We use Vitest for unit testing and Playwright for E2E testing.

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

# Open test UI
pnpm test:ui

See TESTING.md for detailed testing guide.

Contributing

Contributions are welcome! Please ensure:

1. All tests pass: pnpm test
2. Code is formatted: pnpm format
3. No linting errors: pnpm lint
4. Types check: pnpm check

Credit

Svelte-Highlight