Svelte Rune Highlight

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>

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;
}