### Install with yarn

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/getting-started/+page.svx

Install the @humanspeak/svelte-markdown package using yarn.

```bash
yarn add @humanspeak/svelte-markdown
```

--------------------------------

### Install with npm

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/getting-started/+page.svx

Install the @humanspeak/svelte-markdown package using npm.

```bash
npm install @humanspeak/svelte-markdown
```

--------------------------------

### Install with pnpm

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/getting-started/+page.svx

Install the @humanspeak/svelte-markdown package using pnpm.

```bash
pnpm add @humanspeak/svelte-markdown
```

--------------------------------

### Complete KaTeX Integration Example

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/marked-extensions/+page.svx

A full example demonstrating KaTeX integration using component renderers, including the necessary CSS and markdown source with math expressions.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'

    interface KatexRenderers extends Renderers {
        inlineKatex: RendererComponent
        blockKatex: RendererComponent
    }

    const renderers: Partial<KatexRenderers> = {
        inlineKatex: KatexRenderer,
        blockKatex: KatexRenderer
    }

    const source = `
# Euler's Identity

The equation \(e^{i\pi} + 1 = 0\) is considered the most beautiful in mathematics.

\[
 e^{i\pi} + 1 = 0
\]
`
</script>

<svelte:head>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/katex@0.16.45/dist/katex.min.css"
        crossorigin="anonymous"
    />
</svelte:head>

<SvelteMarkdown
    {source}
    extensions={[markedKatex()]}
    {renderers}
/>
```

--------------------------------

### Install svelte-markdown

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

Install the svelte-markdown package using npm, pnpm, or yarn.

```bash
npm i -S @humanspeak/svelte-markdown
```

```bash
pnpm add @humanspeak/svelte-markdown
```

```bash
yarn add @humanspeak/svelte-markdown
```

--------------------------------

### Complete SvelteMarkdown Example

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/svelte-markdown/+page.svx

A full example demonstrating how to use the SvelteMarkdown component with custom renderers, options, and parsing callbacks.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomHeading from './CustomHeading.svelte'
    import CustomCode from './CustomCode.svelte'

    let source = $state('# Hello\n\n```js\nconsole.log("hi")\n```')
    let tokens = $state([])
</script>

<SvelteMarkdown
    {source}
    renderers={{
        heading: CustomHeading,
        code: CustomCode
    }}
    options={{
        headerIds: true,
        headerPrefix: 'doc-',
        gfm: true
    }}
    parsed={(t) => tokens = t}
/>

<p>Parsed {tokens.length} tokens</p>

```

--------------------------------

### Install KaTeX Dependency

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/marked-extensions/+page.svx

Install KaTeX as an optional peer dependency before proceeding with its integration.

```bash
npm install katex
```

--------------------------------

### Install Svelte 5

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/migration/+page.svx

Install Svelte version 5, which is a requirement for @humanspeak/svelte-markdown.

```bash
npm install svelte@5
```

--------------------------------

### Production Example: Dynamic Value Interpolation Setup

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/custom-renderers/+page.svx

Pass structured data containing values to be interpolated into markdown text. The custom renderer will parse the text for placeholders and replace them with dynamic content.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import RawText from './RawText.svelte'

    let markdownBlock = $state({
        message: 'The total revenue is {revenue} across {count} transactions.',
        values: {
            revenue: { type: 'currency', value: 125000, description: 'Total Q4 revenue' },
            count: { type: 'number', value: 1847, description: 'Transaction count' }
        }
    })
</script>

<SvelteMarkdown
    source={markdownBlock.message}
    {markdownBlock}
    renderers={{ rawtext: RawText }}
/>
```

--------------------------------

### Install Mermaid Dependency

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/marked-extensions/+page.svx

Mermaid is an optional peer dependency. Install it using npm.

```bash
npm install mermaid
```

--------------------------------

### Update Dependencies: Uninstall and Install

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/migration/+page.svx

Remove the old svelte-markdown package and install the new @humanspeak/svelte-markdown package using npm.

```bash
# Remove old package
npm uninstall svelte-markdown

# Install new package
npm install @humanspeak/svelte-markdown
```

--------------------------------

### Configure Markdown Parser Options

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/getting-started/+page.svx

Customize the markdown parsing behavior using the `options` prop. This example enables header IDs and GitHub Flavored Markdown.

```svelte
<SvelteMarkdown
    source="# Hello"
    options={{
        headerIds: true,
        headerPrefix: 'doc-',
        gfm: true,
        breaks: false
    }}
/>
```

--------------------------------

### Configuring Markdown Parser Options

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/svelte-markdown/+page.svx

Customize the markdown parsing behavior using the `options` prop. This example enables header IDs, sets a header prefix, and enables GitHub Flavored Markdown and newlines as breaks.

```svelte
<SvelteMarkdown
    source={markdown}
    options={{
        headerIds: true,
        headerPrefix: 'section-',
        gfm: true,
        breaks: true
    }}
/>
```

--------------------------------

### Importing KaTeX Extensions in SvelteKit

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Import core SvelteMarkdown component and KaTeX extensions. This setup avoids pulling heavy peer dependencies into the initial bundle.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown/SvelteMarkdown'
    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions/katex'

    const extensions = [markedKatex()]
    const renderers = {
        inlineKatex: KatexRenderer,
        blockKatex: KatexRenderer
    }
</script>
```

--------------------------------

### Render Mixed Content Markdown

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/basic-rendering/+page.svx

A comprehensive example demonstrating the rendering of various markdown features including headings, bold text, italics, code blocks, tables, blockquotes, and links.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = `
# Project Documentation

## Overview

This project uses **Svelte 5** with *TypeScript* support.

## Installation

```bash
npm install @humanspeak/svelte-markdown
```

## Features

| Feature | Status |
|---------|--------|
| Markdown | Supported |
| HTML | Supported |
| GFM | Supported |

> **Note:** All features are enabled by default.

## Links

- [Documentation](/docs)
- [GitHub](https://github.com/humanspeak/svelte-markdown)

---

*Built with @humanspeak/svelte-markdown*
    `
</script>

<SvelteMarkdown {source} />
```

--------------------------------

### Stream LLM Response with OpenAI SDK (Chunked)

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/llm-streaming/+page.svx

Integrate streaming responses from OpenAI's ChatGPT models using the OpenAI SDK. This example uses the chunked approach to update the SvelteMarkdown component incrementally.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import OpenAI from 'openai'

    let markdown

    async function streamResponse(prompt) {
        const client = new OpenAI()

        const stream = await client.chat.completions.create({
            model: 'gpt-4o',
            messages: [{ role: 'user', content: prompt }],
            stream: true
        })

        markdown?.resetStream('')

        for await (const chunk of stream) {
            const delta = chunk.choices[0]?.delta?.content
            if (delta) {
                markdown?.writeChunk(delta)
            }
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

--------------------------------

### Markdown URL Sanitization Examples

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/security/+page.svx

Demonstrates how dangerous protocols like 'javascript:' are stripped from markdown links, while safe protocols like 'https:' are preserved.

```markdown
<!-- This link will have its href stripped -->
[Click me](javascript:alert('XSS'))

<!-- This link renders normally -->
[Click me](https://example.com)
```

--------------------------------

### Streaming AI Output with Svelte Markdown

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/static/llms-prepend.md

Render streaming AI output that mixes markdown and HTML. This example demonstrates how to handle chunks of data as they arrive to update the markdown content in real-time. It supports both append-mode and offset chunks, with built-in sanitization.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { StreamingChunk } from '@humanspeak/svelte-markdown'

    let markdown:
        | { writeChunk: (chunk: StreamingChunk) => void; resetStream: (next?: string) => void }
        | undefined

    async function streamFromAgent(response: Response) {
        const reader = response.body!.getReader()
        const decoder = new TextDecoder()
        markdown?.resetStream('')
        while (true) {
            const { done, value } = await reader.read()
            if (done) break
            markdown?.writeChunk(decoder.decode(value, { stream: true }))
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

--------------------------------

### Customizing Markdown Rendering with Svelte 5 Snippets

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/snippet-overrides/+page.svx

This example demonstrates how to override default markdown element rendering using Svelte 5 snippets directly within the `<SvelteMarkdown>` component. It shows how to customize headings, paragraphs, and links by passing named snippets as children. Use this for quick, inline style or attribute adjustments.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = '# Hello\n\nA paragraph with [a link](https://example.com).'
</script>

<SvelteMarkdown {source}>
    {#snippet heading({ depth, children })}
        <svelte:element this="h{depth}" class="my-heading">
            {@render children?.()}
        </svelte:element>
    {/snippet}

    {#snippet paragraph({ children })}
        <p class="prose">{@render children?.()}</p>
    {/snippet}

    {#snippet link({ href, title, children })}
        <a {href} {title} target="_blank" rel="noopener noreferrer">
            {@render children?.()}
        </a>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Filter HTML Tags with Utility Functions

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/html-renderers/+page.svx

Use utility functions to define custom HTML tag filtering strategies. This example shows how to allow only specific inline tags, block potentially dangerous tags, and block all HTML.

```svelte
<script>
    import SvelteMarkdown, {
        allowHtmlOnly,
        excludeHtmlOnly,
        buildUnsupportedHTML
    } from '@humanspeak/svelte-markdown'

    // Only allow safe inline tags
    const safeHtml = allowHtmlOnly(['strong', 'em', 'a', 'code'])

    // Block potentially dangerous tags
    const filteredHtml = excludeHtmlOnly(['iframe', 'form', 'input'])

    // Block all HTML
    const noHtml = buildUnsupportedHTML()
</script>

<SvelteMarkdown source={markdown} renderers={{ html: safeHtml }} />
```

--------------------------------

### Build Production Bundle with Vite

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Run this command to build your Vite application for production. This is the first step to inspecting the generated bundle.

```bash
npm run build
```

--------------------------------

### Search for Library Strings in Client Assets

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Use grep to search for distinctive library strings within your client assets. This helps heuristically check for the inclusion of KaTeX or Mermaid. Adjustments may be needed based on your minifier.

```bash
grep -R "KaTeX" .svelte-kit/output/client/_app
```

```bash
grep -R "mermaid" .svelte-kit/output/client/_app
```

--------------------------------

### Basic Component Usage with Updated Import

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/migration/+page.svx

Demonstrates the basic usage of SvelteMarkdown with the updated import path. The core API props remain the same.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    const source = '# Hello World'
</script>

<!-- Same API as before -->
<SvelteMarkdown {source} />
```

--------------------------------

### Render Blockquotes

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/basic-rendering/+page.svx

Blockquotes are rendered using the '>' character at the start of a line. They can span multiple paragraphs.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = '
> This is a blockquote.
>
> It can span multiple paragraphs.
    '
</script>

<SvelteMarkdown {source} />
```

--------------------------------

### Project Structure Overview

Source: https://github.com/humanspeak/svelte-markdown/blob/main/AGENTS.md

Illustrates the directory structure of the svelte-markdown project, including source files, tests, and documentation.

```text
src/
├── lib/
│   ├── index.ts              # Main entry point / exports
│   ├── SvelteMarkdown.svelte # Main component
│   ├── types.ts              # TypeScript types
│   ├── renderers/            # Markdown token renderers
│   │   ├── *.svelte          # Individual renderers (Paragraph, Link, etc.)
│   │   └── html/             # HTML element renderers
│   │       └── *.svelte      # Individual HTML tags (Div, Span, etc.)
│   └── utils/
│       ├── markdown-parser.js
│       ├── token-cache.ts    # LRU caching for parsed tokens
│       ├── cache.ts          # Generic memory cache
│       ├── rendererKeys.ts   # Canonical renderer key lists
│       └── unsupported*.ts   # Allow/deny helper utilities
├── routes/                   # SvelteKit routes (for dev/testing)
└── app.d.ts                  # App-level type declarations
tests/                        # Playwright E2E tests
docs/                         # Documentation site
```

--------------------------------

### Import Extension Subpaths for KaTeX and Mermaid

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Prefer extension family subpaths for specific features like KaTeX and Mermaid. This clearly signals intent to bundlers and improves tree shaking.

```svelte
<script lang="ts">
    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions/katex'
    import { markedMermaid, MermaidRenderer } from '@humanspeak/svelte-markdown/extensions/mermaid'
</script>
```

--------------------------------

### Get Cached Tokens

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/token-caching/+page.svx

Retrieve tokens from the cache using the source and options. Returns undefined if not found or expired.

```typescript
const tokens = cache.getTokens(markdown, options)
```

--------------------------------

### Configure KaTeX Component Renderers

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/marked-extensions/+page.svx

Set up component renderers for KaTeX math expressions by mapping `inlineKatex` and `blockKatex` to `KatexRenderer`.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'

    interface KatexRenderers extends Renderers {
        inlineKatex: RendererComponent
        blockKatex: RendererComponent
    }

    const renderers: Partial<KatexRenderers> = {
        inlineKatex: KatexRenderer,
        blockKatex: KatexRenderer
    }
</script>

<SvelteMarkdown
    source={markdown}
    extensions={[markedKatex()]}
    {renderers}
/>
```

--------------------------------

### Headings with Auto-Generated IDs

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/basic-rendering/+page.svx

Headings in Markdown automatically receive `id` attributes for linking. This example shows default behavior.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = "\
# Introduction
## Getting Started
### Installation
## Usage
### Basic Example
    "
</script>

<!-- Headings get ids: "introduction", "getting-started", etc. -->
<SvelteMarkdown {source} />
```

--------------------------------

### HTML Attribute Sanitization Examples

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/security/+page.svx

Shows how event handler attributes are stripped and URL-bearing attributes are validated in raw HTML within markdown.

```html
<!-- onclick is stripped, javascript: href is blocked -->
<a href="javascript:alert('XSS')" onclick="alert('XSS')">Click</a>

<!-- Safe attributes are preserved -->
<a href="https://example.com" class="link">Click</a>
```

--------------------------------

### buildUnsupportedHTML

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Returns an HtmlRenderers map where every HTML tag is set to UnsupportedHTML. Useful as a starting point when you want to disable all HTML rendering.

```APIDOC
## buildUnsupportedHTML()

### Description
Returns an `HtmlRenderers` map where every HTML tag is set to `UnsupportedHTML`. Useful as a starting point when you want to disable all HTML rendering.

### Signature
```typescript
function buildUnsupportedHTML(): HtmlRenderers
```

### Usage Example
```typescript
import { buildUnsupportedHTML } from '@humanspeak/svelte-markdown'

const html = buildUnsupportedHTML()
```
```

--------------------------------

### Custom KaTeX Snippet with Tree Shaking

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Demonstrates how to use a custom snippet for KaTeX rendering. Importing 'katex' directly means it will be included in the bundle for the current page, impacting tree shaking if not needed elsewhere.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown/SvelteMarkdown'
    import { markedKatex } from '@humanspeak/svelte-markdown/extensions/katex'
    import katex from 'katex'
</script>

<SvelteMarkdown source={markdown} extensions={[markedKatex()]}>
    {#snippet inlineKatex(props)}
        {@html katex.renderToString(props.text, { throwOnError: false })}
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Marked Extension Token Names

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

Example showing how Marked extensions register custom token types. These names are used for component renderers and snippet overrides.

```javascript
// Example: markedKatex (built-in) registers tokens named "inlineKatex" and "blockKatex"
// → use renderers={{ inlineKatex: ..., blockKatex: ... }}
// → or {#snippet inlineKatex(props)} and {#snippet blockKatex(props)}

// Example: a custom alert extension registers a token named "alert"
// → use renderers={{ alert: AlertComponent }}
// → or {#snippet alert(props)}
```

--------------------------------

### Applying Custom Heading Renderer

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/markdown-renderers/+page.svx

Pass your custom renderer component via the 'renderers' prop to the SvelteMarkdown component. This example shows overriding the 'heading' renderer.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomHeading from './CustomHeading.svelte'
</script>

<SvelteMarkdown
    source="# My Heading"
    renderers={{ heading: CustomHeading }}
/>
```

--------------------------------

### Project Structure Overview

Source: https://github.com/humanspeak/svelte-markdown/blob/main/CLAUDE.md

Illustrates the directory layout of the svelte-markdown project, including source files, routes, tests, and documentation.

```text
src/
├── lib/
│   ├── index.ts              # Main entry point / exports
│   ├── SvelteMarkdown.svelte # Main component
│   ├── types.ts              # TypeScript types
│   ├── renderers/            # Markdown token renderers
│   │   ├── *.svelte          # Individual renderers (Paragraph, Link, etc.)
│   │   └── html/             # HTML element renderers
│   │       └── *.svelte      # Individual HTML tags (Div, Span, etc.)
│   └── utils/                # Utility functions
│       ├── markdown-parser.js
│       ├── token-cache.ts    # LRU caching for parsed tokens
│       ├── cache.ts          # Generic memory cache
│       ├── rendererKeys.ts   # Canonical renderer key lists
│       └── unsupported*.ts   # Allow/deny helper utilities
├── routes/                   # SvelteKit routes (for dev/testing)
└── app.d.ts                  # App-level type declarations
tests/                        # Playwright E2E tests
docs/                         # Documentation site
```

--------------------------------

### Variation: Wrapping Heading in a Link

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/linked-headings/+page.svx

This example shows how to wrap the entire heading text within an anchor tag, creating a larger clickable area for the link.

```svelte
<SvelteMarkdown {source}>
    {#snippet heading({ depth, text, slug, options, children })}
        {@const id = options.headerIds ? options.headerPrefix + slug(text) : undefined}
        <svelte:element this="h{depth}" {id} class="group">
            <a href={id ? `#${id}` : undefined} class="no-underline hover:underline text-inherit">
                {@render children?.()}
            </a>
        </svelte:element>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Development Commands for svelte-markdown

Source: https://github.com/humanspeak/svelte-markdown/blob/main/AGENTS.md

Provides essential commands for developing, testing, building, and maintaining the svelte-markdown package using pnpm.

```bash
# Development
pnpm dev              # Start dev server
pnpm dev:pkg          # Watch and rebuild package

# Testing
pnpm test             # Run vitest with coverage
pnpm test:only        # Run vitest without coverage
pnpm test:watch       # Run vitest in watch mode
pnpm test:e2e         # Run Playwright E2E tests
pnpm test:all         # Run both unit and E2E tests

# Building
pnpm build            # Build the package
pnpm package          # Create distributable package
pnpm check            # Run svelte-check type checking

# Code Quality
pnpm lint             # Check linting (prettier + eslint)
pnpm lint:fix         # Fix linting issues
pnpm format           # Format code with prettier
```

--------------------------------

### Customizing Markdown Renderers

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/svelte-markdown/+page.svx

Override default markdown element renderers by providing custom Svelte components in the `renderers` prop. This example customizes `heading` and `link` renderers.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomHeading from './CustomHeading.svelte'
    import CustomLink from './CustomLink.svelte'

    const source = '# Title

    [Click here](https://example.com)'
</script>

<SvelteMarkdown
    {source}
    renderers={{
        heading: CustomHeading,
        link: CustomLink
    }}
/>
```

--------------------------------

### Render Horizontal Rules

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/basic-rendering/+page.svx

Horizontal rules (`---`) are rendered by default, separating content sections. This snippet shows a basic example with two sections separated by a rule.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = `
Section one

---

Section two
    `
</script>

<SvelteMarkdown {source} />
```

--------------------------------

### Custom Link Renderer for External Links

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/custom-renderers/+page.svx

Define a Svelte component to render links. This example specifically targets external links to open them in a new tab with an icon.

```svelte
<!-- ExternalLink.svelte -->
<script lang="ts">
    import type { Snippet } from 'svelte'

    interface Props {
        href?: string
        title?: string
        children?: Snippet
    }

    const { href = '', title = undefined, children }: Props = $props()

    const isExternal = $derived(
        href.startsWith('http://') || href.startsWith('https://')
    )
</script>

{#if isExternal}
    <a {href} {title} target="_blank" rel="noopener noreferrer">
        {@render children?.()}
        <span class="external-icon"> &#x2197;</span>
    </a>
{:else}
    <a {href} {title}>
        {@render children?.()}
    </a>
{/if}
```

```svelte
<!-- Usage -->
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import ExternalLink from './ExternalLink.svelte'

    const source = `
- [Internal link](/about)
- [External link](https://svelte.dev)
    `
</script>

<SvelteMarkdown {source} renderers={{ link: ExternalLink }} />
```

--------------------------------

### Combining Snippets and Component Renderers

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/snippet-overrides/+page.svx

Illustrates how to use snippets for quick, one-off tweaks alongside component renderers for more complex, reusable overrides. This allows for a mix of customization strategies.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import HighlightedCode from './HighlightedCode.svelte'
</script>

<SvelteMarkdown
    source={markdown}
    renderers={{ code: HighlightedCode }}>
    {#snippet paragraph({ children })}
        <p class="prose">{@render children?.()}</p>
    {/snippet}

    {#snippet link({ href, title, children })}
        <a {href} {title} class="text-blue-600 underline">
            {@render children?.()}
        </a>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Send Offset Patch Chunk

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

For websocket-style offset patches, pass an object chunk with `value` and `offset` properties. This overwrites internal buffer content starting at the specified offset.

```typescript
markdown?.writeChunk({ value: 'world', offset: 6 })

```

--------------------------------

### Import SvelteMarkdown with Utilities

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Import the root package to access helpers, types, sanitizer utilities, or renderer maps. Use this when you need more than just the component itself.

```svelte
<script lang="ts">
    import SvelteMarkdown, { allowHtmlOnly } from '@humanspeak/svelte-markdown'

    const html = allowHtmlOnly(['strong', 'em', 'a', 'code'])
</script>

<SvelteMarkdown source={markdown} renderers={{ html }} />
```

--------------------------------

### Component Renderer for Custom HTML Tag

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

Example of using a separate Svelte component ('ClickButton.svelte') as a renderer for a custom HTML tag ('click'). Requires defining the renderer in the 'renderers' prop.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import ClickButton from './ClickButton.svelte'

    const source = '<click>Click Me</click>'
    const renderers = { html: { click: ClickButton } }
</script>

<SvelteMarkdown {source} {renderers} />
```

--------------------------------

### Run Internal Tree-Shaking Verification Script

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/tree-shaking/+page.svx

Execute the package's internal script to build small consumer entries and verify that published subpaths behave as expected for tree-shaking.

```bash
pnpm test:tree-shaking
```

--------------------------------

### Accessing Forwarded Props in Custom Renderer

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/custom-renderers/+page.svx

Declare the custom props in your renderer's interface to access data passed down from the parent `<SvelteMarkdown>` component. For example, `userData` is accessed directly.

```svelte
<!-- CustomText.svelte -->
<script lang="ts">
    interface Props {
        text?: string
        userData?: { theme: string; locale: string; permissions: string[] }
    }

    const { text, userData }: Props = $props()
</script>

<span class="text-{userData?.theme}">
    {text}
</span>
```

--------------------------------

### KaTeX Math Rendering with Component Renderer

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

Use the built-in `markedKatex` extension and `KatexRenderer` component for KaTeX math rendering. Ensure KaTeX CSS is loaded. `KatexRenderer` defaults to `throwOnError: false`.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
    import { markedKatex, KatexRenderer } from '@humanspeak/svelte-markdown/extensions'

    interface KatexRenderers extends Renderers {
        inlineKatex: RendererComponent
        blockKatex: RendererComponent
    }

    const renderers: Partial<KatexRenderers> = {
        inlineKatex: KatexRenderer,
        blockKatex: KatexRenderer
    }
</script>

<svelte:head>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/katex@0.16.45/dist/katex.min.css"
        crossorigin="anonymous"
    />
</svelte:head>

<SvelteMarkdown
    source={`Euler's identity: \(e^{i\pi} + 1 = 0\)`}
    extensions={[markedKatex()]} 
    {renderers}
/>
```

--------------------------------

### Log All Renderer Keys

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Import and log the `rendererKeys` array, which contains all valid markdown renderer key names. Useful for iteration or validation purposes.

```typescript
import { rendererKeys } from '@humanspeak/svelte-markdown'

console.log(rendererKeys)
// ['heading', 'paragraph', 'text', 'image', 'link', 'em', 'escape',
//  'strong', 'codespan', 'del', 'table', 'tablehead', 'tablebody',
//  'tablerow', 'tablecell', 'list', 'orderedlistitem',
//  'unorderedlistitem', 'listitem', 'hr', 'blockquote', 'code',
//  'br', 'rawtext']
```

--------------------------------

### Analyze Markdown Token Structure

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/parsed-callback/+page.svx

Utilize the `parsed` callback to analyze the structure of markdown tokens. This example counts the occurrences of each token type, providing insights into the markdown's composition.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = `
# Title

A paragraph with a [link](https://example.com) and **bold text**.

- List item 1
- List item 2

```javascript
const x = 1
```

> A blockquote
    `

    let analysis = $state({})

    function analyzeTokens(tokens) {
        const counts = {}
        for (const token of tokens) {
            counts[token.type] = (counts[token.type] || 0) + 1
        }
        analysis = counts
    }
</script>

<SvelteMarkdown {source} parsed={analyzeTokens} />

<h3>Token Analysis</h3>
<table>
    <thead>
        <tr><th>Token Type</th><th>Count</th></tr>
    </thead>
    <tbody>
        {#each Object.entries(analysis) as [type, count]}
            <tr>
                <td><code>{type}</code></td>
                <td>{count}</td>
            </tr>
        {/each}
    </tbody>
</table>

```

--------------------------------

### Combine HTML and Markdown Filtering

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/allow-deny/+page.svx

Use `allowHtmlOnly` and `excludeRenderersOnly` to create a custom renderer configuration. This example disables image and code renderers while only allowing 'strong', 'em', and 'a' HTML tags.

```svelte
<script>
    import SvelteMarkdown,
        {
            allowHtmlOnly,
            excludeRenderersOnly
        }
    from '@humanspeak/svelte-markdown'

    const renderers = {
        // Disable image and code renderers
        ...excludeRenderersOnly(['image', 'code']),
        // Only allow safe HTML tags
        html: allowHtmlOnly(['strong', 'em', 'a'])
    }
</script>

<SvelteMarkdown source={markdown} {renderers} />
```

--------------------------------

### Access Available Renderer Keys

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/allow-deny/+page.svx

Import and log `rendererKeys` and `htmlRendererKeys` to view all valid keys for Markdown and HTML renderers respectively. This is useful for understanding the full range of available options.

```typescript
import { rendererKeys, htmlRendererKeys } from '@humanspeak/svelte-markdown'

console.log(rendererKeys)
// ['heading', 'paragraph', 'text', 'image', 'link', ...]

console.log(htmlRendererKeys)
// ['a', 'abbr', 'address', 'article', 'aside', ...]
```

--------------------------------

### Create a Custom Code Block Renderer with Syntax Highlighting

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/custom-renderers/+page.svx

Develop a custom renderer for code blocks that includes language display and basic styling. It accepts `lang` and `text` props.

```svelte
<!-- HighlightedCode.svelte -->
<script lang="ts">
    interface Props {
        lang: string
        text: string
    }

    const { lang, text }: Props = $props()
</script>

<div class="code-block">
    {#if lang}
        <div class="code-lang">{lang}</div>
    {/if}
    <pre><code class="language-{lang}">{text}</code></pre>
</div>

<style>
    .code-block {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
    }
    .code-lang {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px 8px;
        font-size: 0.75rem;
        background: rgba(0, 0, 0, 0.1);
        border-bottom-left-radius: 4px;
    }
</style>
```

--------------------------------

### Override Default Anchor Tag

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/snippet-overrides/+page.svx

Customize the rendering of the `a` (anchor) HTML tag. This example adds `target="_blank"` and `rel="noopener noreferrer"` attributes to links.

```svelte
<SvelteMarkdown source={'<a href="https://example.com">Link</a>'}>
    {#snippet html_a({ attributes, children })}
        <a {...attributes} target="_blank" rel="noopener noreferrer">
            {@render children?.()}
        </a>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Customizing HTML Tag Renderers

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/svelte-markdown/+page.svx

Override default renderers for specific HTML tags within markdown by using the nested `html` key in the `renderers` prop. This example overrides `div` and `span`.

```svelte
<SvelteMarkdown
    {source}
    renderers={{
        html: {
            div: CustomDiv,
            span: CustomSpan
        }
    }}
/>
```

--------------------------------

### Import SvelteMarkdown named exports: cache utilities

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Import the cache utility classes and instances for managing token caching.

```typescript
// Named exports -- cache utilities
import {
    MemoryCache,
    TokenCache,
    tokenCache
} from '@humanspeak/svelte-markdown'
```

--------------------------------

### Stream Server-Sent Events with Fetch (Chunked)

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/llm-streaming/+page.svx

Stream responses from a custom API endpoint using fetch and Server-Sent Events (SSE). This example directly updates the SvelteMarkdown component with incoming chunks.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    let markdown

    async function streamFromAPI(prompt) {
        const response = await fetch('/api/chat', {
            method: 'POST',
            body: JSON.stringify({ prompt }),
            headers: { 'Content-Type': 'application/json' }
        })

        if (!response.ok) throw new Error(`HTTP ${response.status}`)

        const reader = response.body.getReader()
        const decoder = new TextDecoder()

        markdown?.resetStream('')

        try {
            while (true) {
                const { done, value } = await reader.read()
                if (done) break
                markdown?.writeChunk(decoder.decode(value, { stream: true }))
            }
        } finally {
            reader.releaseLock()
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

--------------------------------

### Initialize TokenCache

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Create a specialized cache for markdown tokens using MemoryCache. Set maxSize and ttl to control cache behavior.

```typescript
import { TokenCache } from '@humanspeak/svelte-markdown'

const cache = new TokenCache({
    maxSize: 100,       // Cache up to 100 documents
    ttl: 10 * 60 * 1000 // 10-minute TTL
})
```

--------------------------------

### Reactive Updates with Parsed Callback

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/parsed-callback/+page.svx

The 'parsed' callback fires reactively when SvelteMarkdown props like 'source', 'options', or 'isInline' change. This example logs the time and token count each time parsing occurs.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    let source = $state('# Hello')
    let lastParsed = $state(null)

    function handleParsed(tokens) {
        lastParsed = new Date().toLocaleTimeString()
        console.log('Parsed at:', lastParsed, 'Tokens:', tokens.length)
    }
</script>

<input bind:value={source} style="width: 100%;" />
<p>Last parsed: {lastParsed}</p>

<SvelteMarkdown {source} parsed={handleParsed} />

```

--------------------------------

### Override Task List Item Renderer

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/snippet-overrides/+page.svx

Customize task list item rendering using the `task` and `checked` props. This example adds custom styling for done and todo items and uses disabled checkboxes.

```svelte
<SvelteMarkdown source="- [x] Done\n- [ ] Todo\n- Regular item">
    {#snippet listitem({ text, task, checked, children })}
        <li class:task>
            {#if task}
                <label>
                    <input type="checkbox" {checked} disabled />
                    <span class:done={checked}>{@render children?.()}</span>
                </label>
            {:else}
                {@render children?.()}
            {/if}
        </li>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Create a Custom Heading Renderer with Anchor Links

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/renderers/custom-renderers/+page.svx

Implement a custom heading renderer that adds anchor links for navigation. It utilizes `depth`, `text`, `options`, `slug`, and `children` props.

```svelte
<!-- AnchorHeading.svelte -->
<script lang="ts">
    import type { Snippet } from 'svelte'
    import type { SvelteMarkdownOptions } from '@humanspeak/svelte-markdown'

    interface Props {
        depth: number
        raw: string
        text: string
        options: SvelteMarkdownOptions
        slug: (val: string) => string
        children?: Snippet
    }

    const { depth, text, options, slug, children }: Props = $props()

    const id = $derived(
        options.headerIds ? options.headerPrefix + slug(text) : undefined
    )
</script>

<svelte:element this="h{depth}" {id} class="heading">
    {#if id}
        <a href="#{id}" class="anchor-link">#</a>
    {/if}
    {@render children?.()}
</svelte:element>

<style>
    .heading {
        position: relative;
    }
    .anchor-link {
        position: absolute;
        left: -1.5em;
        opacity: 0;
        text-decoration: none;
    }
    .heading:hover .anchor-link {
        opacity: 0.5;
    }
</style>
```

--------------------------------

### MemoryCache Usage

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Demonstrates how to instantiate and use the generic MemoryCache class for in-memory caching with TTL expiration and LRU eviction.

```APIDOC
## MemoryCache

A generic in-memory cache class with TTL expiration and LRU eviction. Used internally by `TokenCache`.

### Usage

```typescript
import { MemoryCache } from '@humanspeak/svelte-markdown'

const cache = new MemoryCache<string>({
    maxSize: 100,
    ttl: 5 * 60 * 1000
})

cache.set('key', 'value')
const value = cache.get('key') // 'value'
```

### Constructor Options

- **maxSize** (number) - The maximum number of items the cache can hold.
- **ttl** (number) - The time-to-live for cache entries in milliseconds.
```

--------------------------------

### Customizing URL and Attribute Sanitization in Svelte

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/blog/rendering-agent-html-safely/+page.svx

Use custom `sanitizeUrl` and `sanitizeAttributes` functions to define specific policies for rendering HTML. This example allows `data:image/*` URLs for images and blocks all attributes on iframes.

```svelte
<script lang="ts">
    import SvelteMarkdown,
        { defaultSanitizeUrl,
          defaultSanitizeAttributes } from '@humanspeak/svelte-markdown'

    // Allow `data:image/*` only on <img>; defaults for everything else.
    function sanitizeUrl(url, { type, tag }) {
        if (tag === 'img' && url.startsWith('data:image/')) return url
        return defaultSanitizeUrl(url, { type, tag })
    }

    // Block all attributes on `<iframe>`; defaults elsewhere.
    function sanitizeAttributes(attributes, context, urlSanitizer) {
        if (context.tag === 'iframe') return {}
        return defaultSanitizeAttributes(attributes, context, urlSanitizer)
    }
</script>

<SvelteMarkdown source={agentResponse} {sanitizeUrl} {sanitizeAttributes} />
```

--------------------------------

### HTML Helper Utilities for Allow/Deny Strategies

Source: https://github.com/humanspeak/svelte-markdown/blob/main/AGENTS.md

Demonstrates how to use helper functions to control which HTML tags are allowed or excluded within the markdown rendering.

```typescript
// HTML helpers
allowHtmlOnly(['strong', 'em', 'a']) // Only allow these HTML tags
excludeHtmlOnly(['iframe', 'script']) // Block specific tags
buildUnsupportedHTML() // Block all HTML
```

--------------------------------

### Markdown Renderer Helper Utilities for Allow/Deny Strategies

Source: https://github.com/humanspeak/svelte-markdown/blob/main/AGENTS.md

Illustrates how to use helper functions to specify which markdown renderers are permitted or blocked.

```typescript
// Markdown helpers
allowRenderersOnly(['paragraph', 'link']) // Only allow these renderers
excludeRenderersOnly(['html']) // Block specific renderers
buildUnsupportedRenderers() // Block all markdown renderers
```

--------------------------------

### Stream LLM Response with Anthropic SDK (Chunked)

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/advanced/llm-streaming/+page.svx

Use this snippet to stream responses from Anthropic's Claude models in a chunked manner, updating the SvelteMarkdown component directly. Ensure the Anthropic SDK is installed and configured.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import Anthropic from '@anthropic-ai/sdk'

    let markdown

    async function streamResponse(prompt) {
        const client = new Anthropic()

        const stream = client.messages.stream({
            model: 'claude-sonnet-4-20250514',
            max_tokens: 1024,
            messages: [{ role: 'user', content: prompt }]
        })

        markdown?.resetStream('')

        for await (const event of stream) {
            if (
                event.type === 'content_block_delta' &&
                event.delta.type === 'text_delta'
            ) {
                markdown?.writeChunk(event.delta.text)
            }
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

--------------------------------

### Basic Footnote Rendering

Source: https://github.com/humanspeak/svelte-markdown/blob/main/README.md

Use markedFootnote, FootnoteRef, and FootnoteSection for built-in footnote support. Footnote references render as superscript links, and definitions render as a numbered list with back-links.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { RendererComponent, Renderers } from '@humanspeak/svelte-markdown'
    import {
        markedFootnote,
        FootnoteRef,
        FootnoteSection
    } from '@humanspeak/svelte-markdown/extensions'

    const source = `
Here is a statement[^1] with a footnote.

Another claim[^note] that needs a source.

[^1]: This is the first footnote.
[^note]: This is a named footnote.
`

    interface FootnoteRenderers extends Renderers {
        footnoteRef: RendererComponent
        footnoteSection: RendererComponent
    }

    const renderers: Partial<FootnoteRenderers> = {
        footnoteRef: FootnoteRef,
        footnoteSection: FootnoteSection
    }
</script>

<SvelteMarkdown {source} extensions={[markedFootnote()]} {renderers} />
```

--------------------------------

### Enabling Streaming Mode

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/svelte-markdown/+page.svx

Optimize rendering for LLM streaming scenarios by setting the `streaming` prop to `true`. This enables efficient DOM diffing for updated content.

```svelte
<SvelteMarkdown {source} streaming={true} />
```

--------------------------------

### Customizing Markdown Rendering with Multiple Snippet Overrides

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/snippet-overrides/+page.svx

Use snippet overrides to customize the rendering of specific Markdown elements. This example shows how to override headings, paragraphs, links, blockquotes, code blocks, and list items with custom Svelte components.

```svelte
<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const source = `
# Project Update

Here's what changed this week:

- Implemented **snippet overrides** for inline customization
- Added [TypeScript types](https://www.typescriptlang.org/) for all props
- Fixed a bug in the 
`Parser` component

> **Tip:** Snippets are the fastest way to customize rendering.


```javascript
const greeting = 'Hello from snippets!'
```
    `
</script>

<SvelteMarkdown {source}>
    {#snippet heading({ depth, children })}
        <svelte:element this="h{depth}" class="font-bold text-gray-900 mb-4">
            {@render children?.()}
        </svelte:element>
    {/snippet}

    {#snippet paragraph({ children })}
        <p class="text-gray-700 leading-relaxed mb-4">{@render children?.()}</p>
    {/snippet}

    {#snippet link({ href, title, children })}
        <a {href} {title} target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">
            {@render children?.()}
        </a>
    {/snippet}

    {#snippet blockquote({ children })}
        <aside class="border-l-4 border-blue-400 pl-4 my-4 italic text-gray-600">
            {@render children?.()}
        </aside>
    {/snippet}

    {#snippet code({ lang, text })}
        <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto my-4"><code>{text}</code></pre>
    {/snippet}

    {#snippet listitem({ children })}
        <li class="flex items-start gap-2 mb-1">
            <span class="text-blue-500">•</span>
            <div>{@render children?.()}</div>
        </li>
    {/snippet}
</SvelteMarkdown>
```

--------------------------------

### Global tokenCache Instance

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/api/types/+page.svx

Details on how to interact with the global singleton `tokenCache` instance for checking statistics and clearing tokens.

```APIDOC
## tokenCache

The global singleton `TokenCache` instance used internally by all `SvelteMarkdown` components. Defaults to 50 entries with a 5-minute TTL.

### Usage

```typescript
import { tokenCache } from '@humanspeak/svelte-markdown'

// Check cache statistics
console.log(tokenCache.size)

// Clear all cached tokens
tokenCache.clearAllTokens()
```

### Methods

- **size** (number) - Returns the current number of items in the cache.
- **clearAllTokens** () - Clears all tokens from the cache.
```

--------------------------------

### Render Simple Markdown String

Source: https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/routes/docs/examples/basic-rendering/+page.svx

Pass a markdown string directly to the `source` prop for basic rendering. Ensure the SvelteMarkdown component is imported.

```svelte
import SvelteMarkdown from '@humanspeak/svelte-markdown'

const source = `
# Welcome

This is a paragraph with **bold**, *italic*, and ~~strikethrough~~ text.

- Item one
- Item two
- Item three
    `
```

```svelte
<SvelteMarkdown {source} />
```