UNPKG

@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.

40 lines (39 loc) 1.79 kB
import { type ShikiHighlighter } from './createShikiHighlighter.js'; interface Props { /** Language identifier from the code fence (e.g. `"js"`, `"typescript"`). Untrusted. */ lang: string; /** Raw text content of the code block. */ text: string; /** Optional explicit highlighter; overrides context and singleton. */ highlighter?: ShikiHighlighter; } /** * SPIKE — a drop-in replacement for the default `code` renderer that renders * fenced code blocks with Shiki syntax highlighting. * * Same `Props` shape as the built-in `Code.svelte` (`lang`, `text`) so it slots * directly into the standard `renderers` prop with no new component API: * * ```svelte * <script> * import { createShikiHighlighter, ShikiCode, setShikiHighlighter } from '.../extensions/shiki' * import js from 'shiki/langs/javascript.mjs' * import githubDark from 'shiki/themes/github-dark.mjs' * setShikiHighlighter(createShikiHighlighter({ langs: [js], themes: [githubDark] })) * </script> * * <SvelteMarkdown {source} renderers={{ code: ShikiCode }} /> * ``` * * The highlighter is resolved from (in priority order) an explicit `highlighter` * prop, Svelte context under `SHIKI_CONTEXT_KEY`, then the module singleton. * * Highlighting is memoized: `html` is `$derived` purely from `(text, lang)` (and * the resolved highlighter), so re-renders during streaming do NOT re-highlight a * code block whose text has not changed. Shiki escapes the code text it emits, and * the unregistered-language fallback escapes too, so the `{@html}` sink only ever * receives library-generated / escaped markup — never raw user input. */ declare const ShikiCode: import("svelte").Component<Props, {}, "">; type ShikiCode = ReturnType<typeof ShikiCode>; export default ShikiCode;