36 lines
752 B
TypeScript
36 lines
752 B
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
interface MarkdownProps {
|
|
children: string;
|
|
className?: string;
|
|
inline?: boolean;
|
|
}
|
|
|
|
const REMARK_PLUGINS = [remarkGfm];
|
|
|
|
export function Markdown(
|
|
{ children, className, inline = false }: MarkdownProps,
|
|
) {
|
|
return (
|
|
<div
|
|
className={`md${className ? ` ${className}` : ""}${
|
|
inline ? " md--inline" : ""
|
|
}`}
|
|
>
|
|
<ReactMarkdown
|
|
remarkPlugins={REMARK_PLUGINS}
|
|
components={{
|
|
a: ({ href, children }) => (
|
|
<a href={href} target="_blank" rel="noopener noreferrer">
|
|
{children}
|
|
</a>
|
|
),
|
|
}}
|
|
>
|
|
{children}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|