Markdown Chatbot

Markdown Syntax Highlighting Streaming

Transform plain AI responses into beautifully formatted content with syntax-highlighted code, lists, tables, and more.

Overview

Most AI responses contain markdown - code blocks, bullet points, headers. Raw markdown is hard to read. This recipe uses streamdown-svelte to render streaming markdown with Shiki-powered syntax highlighting that works perfectly in both light and dark modes.

Demo

Ask for code examples to see syntax highlighting in action!

Try: "Show me a TypeScript function with error handling"

Server Endpoint

Guide the AI to use markdown formatting with a system prompt:

src/routes/api/chat/+server.ts

The Markdown Component

streamdown-svelte handles streaming markdown gracefully, rendering partial content as it arrives:

markdown.svelte

Rendering Messages

Render user messages as plain text and assistant messages as markdown:

src/routes/+page.svelte