Markdown Preview

Markdown to syntax-highlighted HTML. Raw HTML in the source is escaped.

Rendering…

demos.tsx

import { MarkdownPreview } from "@/components/ui/hiip-ui/markdown-preview";

function MarkdownPreviewDemo() {
  return (
    <MarkdownPreview
      className="max-h-64 w-full"
      source={[
        "### Outreach brief",
        "",
        "Reply in **the creator's own language**, and never assume gender.",
        "",
        "```ts",
        'const greet = (name: string) => "Hi " + name;',
        "```",
      ].join("\n")}
    />
  );
}

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/markdown-preview

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/markdown-preview.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/markdown-preview.

<MarkdownPreview />

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

MarkdownPreview

Prop	Type	Default
`source`required	`string`	—
`className`	`string \| undefined`	—

Type

registry:ui

npm packages

markdown-it @shikijs/markdown-it @tailwindcss/typography

Files written

components/ui/hiip-ui/markdown-preview.tsx
components/ui/highlight.ts