import ReactMarkdown, { Components } from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import Image from "next/image";
import { cn } from "@/lib/utils";
interface MarkdownRendererProps {
content: string;
className?: string;
}
export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
const components: Components = {
code(props) {
const { inline, className, children } = props as {
inline?: boolean;
className?: string;
children: React.ReactNode;
};
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
{String(children).replace(/\n$/, "")}
) : (
{children}
);
},
h1: ({ children }) => (
{children}
),
h2: ({ children }) => (
{children}
),
h3: ({ children }) => (
{children}
),
h4: ({ children }) => (
{children}
),
h5: ({ children }) => (
{children}
),
h6: ({ children }) => (
{children}
),
p: ({ children }) => (
{children}
),
ul: ({ children }) => (
),
ol: ({ children }) => (
{children}
),
li: ({ children }) => (
{children}
),
blockquote: ({ children }) => (
{children}
),
a: ({ children, href, ...props }) => (
{children}
),
img: ({ src, alt }) => {
// Handle case where src might be a Blob or other non-string type
const imageSrc = typeof src === 'string' ? src : src?.toString() || '';
return (
);
},
table: ({ children }) => (
),
th: ({ children }) => (
{children}
|
),
td: ({ children }) => (
{children}
|
),
hr: () => (
),
strong: ({ children }) => (
{children}
),
em: ({ children }) => (
{children}
),
};
return (
{content}
);
}