Markdown

<script lang="ts">
	import Markdown from '@tcpsystems/ui/foundation/Markdown';
	const source = `## Release notes

Version **2.4** adds *streaming* responses and fixes two bugs.

- Faster cold starts
- New \`--dry-run\` flag
- Fixed pagination on the runs list`;
</script>

<Markdown {source} />

<script lang="ts">
	import Markdown from '@tcpsystems/ui/foundation/Markdown';
	const source = `### Getting started

Install the package, then read the [component guide](https://ui.tcp.systems).

\`\`\`bash
pnpm add @tcpsystems/ui
\`\`\`

1. Import a component
2. Render it
3. Ship`;
</script>

<Markdown {source} />

<script lang="ts">
	import Markdown from '@tcpsystems/ui/foundation/Markdown';
	const source = `User comment with <b>raw HTML</b> is shown as text, not rendered.`;
</script>

<Markdown {source} rawHtml="escape" />

<script lang="ts">
	import Markdown from '@tcpsystems/ui/foundation/Markdown';
	import Textarea from '@tcpsystems/ui/foundation/Textarea';
	const uid = $props.id();
	let source = $state('Write a **status update** for the team.\n\n- Shipped the gateway\n- Next: docs');
</script>

<Textarea id="{uid}-source" aria-label="Markdown source" bind:value={source} rows={5} />
<Markdown {source} />