31 lines
804 B
TypeScript
31 lines
804 B
TypeScript
|
import Link from "next/link";
|
||
|
|
import ReactMarkdown from "react-markdown";
|
||
|
|
import rehypeHighlight from "rehype-highlight";
|
||
|
|
import rehypeRaw from "rehype-raw";
|
||
|
|
import rehypeSlug from "rehype-slug";
|
||
|
|
import remarkGfm from "remark-gfm";
|
||
|
|
|
||
|
|
interface RenderMarkdownProps {
|
||
|
|
children: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function RenderMarkdown({ children }: RenderMarkdownProps) {
|
||
|
|
return (
|
||
|
|
<ReactMarkdown
|
||
|
|
remarkPlugins={[remarkGfm]}
|
||
|
|
rehypePlugins={[rehypeRaw, rehypeHighlight, rehypeSlug]}
|
||
|
|
components={{
|
||
|
|
a: ({ node, ...props }) => {
|
||
|
|
return (
|
||
|
|
<Link legacyBehavior href={props.href as string}>
|
||
|
|
<a>{props.children ? props.children[0] : props.href}</a>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</ReactMarkdown>
|
||
|
|
);
|
||
|
|
}
|