@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.
38 lines (37 loc) • 1.28 kB
TypeScript
import type { MarkedExtension } from 'marked';
/**
* Valid GitHub-style alert types.
*
* @see https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
*/
export type AlertType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
/**
* Creates a marked extension that tokenizes GitHub-style alert blockquotes
* into custom `alert` tokens.
*
* The extension produces block-level tokens with
* `{ type: 'alert', raw, text, alertType }` where `alertType` is one of
* `note`, `tip`, `important`, `warning`, or `caution`, and `text` is the
* alert body with leading `> ` stripped.
*
* Pair it with `AlertRenderer` (or your own component) to render the alerts.
*
* @example
* ```svelte
* <script lang="ts">
* import SvelteMarkdown from '@humanspeak/svelte-markdown'
* import { markedAlert, AlertRenderer } from '@humanspeak/svelte-markdown/extensions'
*
* const renderers = { alert: AlertRenderer }
* </script>
*
* <SvelteMarkdown
* source={markdown}
* extensions={[markedAlert()]}
* {renderers}
* />
* ```
*
* @returns A `MarkedExtension` with a single block-level `alert` tokenizer
*/
export declare function markedAlert(): MarkedExtension;