@humanspeak/svelte-markdown
Version:
Markdown and HTML renderer for Svelte 5 — built for rendering streaming AI agent output from Claude Code, ChatGPT, and agentic workflows. XSS-safe defaults, streaming-aware sanitization, token caching, TypeScript types, and Svelte 5 runes.
33 lines (32 loc) • 1.49 kB
JavaScript
/**
* SPIKE — highlighter injection strategies for `ShikiCode.svelte`.
*
* The `code` renderer is instantiated deep inside `SvelteMarkdown` via the
* `renderers` prop, which only forwards token-derived props (`lang`, `text`).
* There is therefore no ergonomic way to thread a per-instance `highlighter`
* prop through the standard renderers map, so the spike offers two out-of-band
* channels and lets `ShikiCode` resolve in priority order:
*
* 1. an explicit `highlighter` prop (only reachable if the consumer wraps
* `ShikiCode` in their own component),
* 2. Svelte {@link https://svelte.dev/docs/svelte#setcontext | context} set by
* an ancestor of `<SvelteMarkdown>` under {@link SHIKI_CONTEXT_KEY},
* 3. a module-level singleton set via {@link setShikiHighlighter}.
*
* The report recommends one of these for the ship plan.
*
* @module
*/
/** Context key an ancestor of `<SvelteMarkdown>` can set to inject a highlighter. */
export const SHIKI_CONTEXT_KEY = Symbol('svelte-markdown:shiki-highlighter');
let singleton;
/**
* Register a process/module-wide highlighter used by every `ShikiCode` that
* receives neither a prop nor a context highlighter. Convenient for apps with a
* single global theme; pass `undefined` to clear (used in tests).
*/
export const setShikiHighlighter = (highlighter) => {
singleton = highlighter;
};
/** Read the current module-level singleton highlighter, if any. */
export const getShikiHighlighter = () => singleton;