range_highlighting.svelte.ts

view source

Declarations
#

3 declarations

create_range_highlighting
#

range_highlighting.svelte.ts view source

(options: RangeHighlightingOptions): RangeHighlighting import {create_range_highlighting} from '@fuzdev/fuz_code/range_highlighting.svelte.js';

Wires up CSS Custom Highlight API range highlighting for a single element's text node, shared by CodeHighlight and CodeTextarea. Creates a HighlightManager, memoizes tokenization, applies/clears ranges in an effect, emits DEV warnings for unsupported languages, and tears down on destroy.

Must be called during component initialization (it uses $effect/onDestroy).

options

type RangeHighlightingOptions

returns

RangeHighlighting

RangeHighlighting
#

RangeHighlightingOptions
#

range_highlighting.svelte.ts view source

RangeHighlightingOptions import type {RangeHighlightingOptions} from '@fuzdev/fuz_code/range_highlighting.svelte.js';

Reactive inputs for create_range_highlighting. All values are getters so the helper can track the consuming component's reactive state across the call boundary (the Svelte 5 getter-injection pattern).

element

The element whose first text node receives the highlight ranges.

type () => Element | undefined

text

The text to tokenize. Must match the element's text node exactly (e.g. a textarea backdrop includes its trailing newline here too).

type () => string

lang

Language id; null disables highlighting.

type () => string | null

grammar

Optional custom grammar; takes precedence over lang for tokenization.

type () => SyntaxGrammar | undefined

syntax_styler

The syntax styler whose registered grammars back lang lookups.

type () => SyntaxStyler

enabled?

Extra gate — ranges are only applied when this returns true. Defaults to always-on.

type () => boolean

dev_label

Component name used in DEV warnings.

type string

Depends on
#

Imported by
#