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.

55 lines (54 loc) 1.79 kB
import { tailWindowSafeExtension } from '../../utils/tail-window.js'; /** * Creates a marked extension that tokenizes fenced ` ```mermaid ` code blocks * into custom `mermaid` tokens. * * The extension produces block-level tokens with `{ type: 'mermaid', raw, text }` * where `text` is the trimmed diagram source. It has zero runtime dependencies — * pair it with `MermaidRenderer` (or your own component) to render the diagrams. * * @example * ```svelte * <script lang="ts"> * import SvelteMarkdown from '@humanspeak/svelte-markdown' * import { markedMermaid, MermaidRenderer } from '@humanspeak/svelte-markdown' * * const renderers = { mermaid: MermaidRenderer } * </script> * * <SvelteMarkdown * source={markdown} * extensions={[markedMermaid()]} * {renderers} * /> * ``` * * @returns A `MarkedExtension` with a single block-level `mermaid` tokenizer */ export function markedMermaid() { const ext = { extensions: [ { name: 'mermaid', level: 'block', start(src) { return src.match(/```mermaid/)?.index; }, tokenizer(src) { const match = src.match(/^```mermaid\n([\s\S]*?)```/); if (match) { return { type: 'mermaid', raw: match[0], text: match[1].trim() }; } } } ] }; // The mermaid tokenizer is block-anchored (a ` ```mermaid ` fence) and // inspects only `src` from the current position, so it is safe inside the // streaming tail-window. return tailWindowSafeExtension(ext); }