Scrum4Me/app/(app)/manual/_components/markdown-view.tsx

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import { MermaidBlock } from './mermaid-block'

type Props = {
  markdown: string
}

export function MarkdownView({ markdown }: Props) {
  return (
    <article className="prose prose-neutral max-w-none dark:prose-invert prose-headings:scroll-mt-20 prose-a:text-primary prose-code:rounded prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:text-sm prose-pre:bg-muted prose-pre:text-foreground">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[
          rehypeSlug,
          [rehypeAutolinkHeadings, { behavior: 'wrap' }],
        ]}
        components={{
          code(props) {
            const { className, children } = props as {
              className?: string
              children?: React.ReactNode
            }
            const match = /language-(\w+)/.exec(className ?? '')
            const lang = match?.[1]
            const text = String(children ?? '').replace(/\n$/, '')
            if (lang === 'mermaid') {
              return <MermaidBlock source={text} />
            }
            return (
              <code className={className}>{children}</code>
            )
          },
        }}
      >
        {markdown}
      </ReactMarkdown>
    </article>
  )
}