Markdown.tsx

 1import ReactMarkdown from 'react-markdown'
 2import remarkGfm from 'remark-gfm'
 3import { cn } from '@/lib/utils'
 4
 5interface MarkdownProps {
 6  content: string
 7  className?: string
 8}
 9
10// Renders a Markdown string with GitHub-flavoured extensions (tables, task
11// lists, strikethrough). Used in Timeline comments and NewBugPage preview.
12export function Markdown({ content, className }: MarkdownProps) {
13  return (
14    <ReactMarkdown
15      remarkPlugins={[remarkGfm]}
16      className={cn(
17        'prose prose-sm dark:prose-invert max-w-none',
18        'prose-pre:bg-muted prose-pre:text-foreground',
19        'prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none',
20        className,
21      )}
22    >
23      {content}
24    </ReactMarkdown>
25  )
26}