Markdown

Render structured agent output with safe links, useful typography, and first-class code blocks.

Edge cache rollout

The canary cut origin traffic by 38% and kept cache_hit_age in range. Open the runbook.

Region	Hit rate	p95
iad1	91%	142 ms
fra1	88%	156 ms

Confirm cache headers at the edge
Audit image transformation keys

Installation

pnpm dlx @mielui/svelte add markdown

Usage

Pass Markdown text as content. It is parsed as GitHub Flavored Markdown, so tables, task lists, and strikethrough work. Fenced code renders with CodeBlock.

Raw HTML is shown as text. Links allow HTTP, HTTPS, mailto, and relative URLs. Images must use relative paths; an external image URL renders its alt text.

<script lang="ts">
    import { Markdown } from '@mielui/svelte/components/markdown';

    const content = [
        '## Result',
        '',
        '| File | Status |',
        '| --- | --- |',
        '| app.ts | Updated |',
        '',
        '- [x] Run checks'
    ].join('\n');
</script>

<Markdown {content} />

Examples

Rollout report

A full report with a quote, a table, a task list, and a code block.

Edge cache rollout review

The canary reduced origin traffic by 38% while keeping cache_hit_age within the expected range. Open the rollout runbook for the full procedure.

Recommendation: continue to 50% traffic, but keep image transforms outside the cache until the key audit is complete.

Regional health

Region	Hit rate	p95
iad1	91%	142 ms
fra1	88%	156 ms
sin1	86%	171 ms

Rollout tasks

Confirm cache headers at the edge
Compare origin error rates
Audit image transformation keys

const rollout = await edgeCache.promote({
  traffic: 0.5,
  regions: ['iad1', 'fra1', 'sin1']
});

Streaming

Append text to content while streaming is true, then set it to false when the response ends or is stopped. Streaming marks the output busy and shows a caret. Blocks that keep their type and position keep their state as text arrives.

Start a response to watch Markdown arrive

Untrusted HTML

Script tags, inline handlers, and unsafe link schemes stay inert text.

Untrusted content stays inert

HTML is shown as source text. Unsafe URL schemes are not turned into links.

Imported model output

<script>document.body.textContent = "changed";</script>

<button onclick="sendSecrets()">Approve access</button>

Open internal report

Labels

Pass labels to translate the accessible names of task-list checkboxes and scrollable tables. Every key of MarkdownLabels is optional; omitted keys keep the English text.

<script lang="ts">
    import { Markdown, type MarkdownLabels } from '@mielui/svelte/components/markdown';

    let { content }: { content: string } = $props();

    const labels: MarkdownLabels = {
        completedTask: 'Tâche terminée',
        incompleteTask: 'Tâche à faire',
        table: 'Tableau'
    };
</script>

<Markdown {content} {labels} />

API reference

Markdown

Renders GitHub-flavored Markdown.

labels

MarkdownLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.
content Required

string
Markdown source parsed with marked's GFM tokenizer. Raw HTML is rendered as text.
streaming

boolean
Marks an in-progress response as busy and shows a restrained visual caret.

Default false
class

string
Classes added to the element.