ProseMd

Renders a markdown string client-side (fence highlighting, sanitized output).

Typography

Usage

import { ProseMd } from "@zudo-sg/ui/src/content/prose-md/prose-md";

<ProseMd markdown={"## Heading\n\nBody copy."} />

Default

Source

<ProseMd markdown={"## Getting started\n\nInstall the package, then render markdown straight from a string.\n\n- Zero-config defaults\n- Full **TypeScript** support\n\n```ts\nexport function greet(name: string): string {\n  return `Hello, ${name}!`;\n}\n```\n\n> Edits to this field re-render live once wired into the canvas inspector.\n"} />

Live CSS

Injected into the previews above. ProseMd

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */