Version: 0.12.1
Syntax highlighting for Svelte 5 Runes using highlight.js .
pnpm i -D svelte-rune-highlight highlight.js
// +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/github-dark.min.css" />
</svelte:head>
This library requires:
import { Highlight } from 'svelte-rune-highlight';
import javascript from 'highlight.js/lib/languages/javascript';
const jsLang = {
name: 'javascript',
register: javascript
};
const code = `console.log('Hello, world!');`;
<Highlight language={jsLang} {code} />import type { LanguageFn } from 'highlight.js';
import type { HTMLAttributes } from 'svelte/elements';
import type { Component } from 'svelte';
// Note: 'svelte' is handled specially by HighlightSvelte component, not via the languages object
// Other languages correspond to keys in the languages export from index.ts
export const SUPPORTED_LANGUAGES = ['md', 'ts', 'js', 'javascript', 'json', 'yaml', 'css'] as const;
export type SupportedLanguage = 'svelte' | (typeof SUPPORTED_LANGUAGES)[number];
export type HighlightLanguage = {
name: string;
register: LanguageFn;
};
// Common highlight display options
export interface HighlightDisplayOptions {
langtag?: boolean;
numberLine?: boolean;
hideBorder?: boolean;
wrapLines?: boolean;
startingLineNumber?: number;
highlightedLines?: number[];
highlightedRanges?: [number, number][];
backgroundColor?: string;
position?: 'static' | 'relative' | 'absolute' | 'sticky' | undefined;
}
// Common library replacement option
export interface LibReplaceOption {
replaceLib?: string | false;
}
// Common class styling option
export interface ClassOption {
class?: string;
}
export interface ExampleWrapperProps extends HTMLAttributes<HTMLDivElement>, LibReplaceOption {
name?: string;
component?: Component;
code?: string;
components?: Record<string, Component>;
modules?: Record<string, string>;
innerClass?: string;
codeClass?: string;
lang?: SupportedLanguage;
showCopy?: boolean;
class?: string;
}
export interface HighlightProps extends HighlightDisplayOptions, LibReplaceOption, ClassOption {
language: HighlightLanguage;
code: string;
}
export interface HighlightAutoProps extends HighlightDisplayOptions, LibReplaceOption, ClassOption {
code?: string;
languages?: string[];
}
export interface HighlightCompoProps extends HighlightDisplayOptions, LibReplaceOption, ClassOption {
code: string;
contentClass?: string;
lang?: SupportedLanguage;
showCopy?: boolean;
showExpand?: boolean;
}
export interface HighlightSvelteProps extends HighlightDisplayOptions, LibReplaceOption, ClassOption {
code?: string;
}
export interface LangTagProps extends HTMLAttributes<HTMLPreElement> {
code?: string;
highlighted?: string;
languageName?: string;
langtag?: boolean;
codeClass?: string;
}