return markdown component

src/components/Markdown.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+/* -------------------------------------------------------------------------- */
+/*                                  MarkDown                                  */
+/* -------------------------------------------------------------------------- */
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import Typography from "./typography/Typography";
+import Heading from "./typography/Heading";
+import Link from "./Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Code                                    */
+/* -------------------------------------------------------------------------- */
+import vsc from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
+import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";
+import docco from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+
+export type Props = {
+  markdown: string;
+};
+
+const Markdown = ({ markdown }: Props) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      children={markdown}
+      components={{
+        h1: Heading,
+        h2: Typography,
+        a: (props) => {
+          return (
+            <Link
+              href={props.href}
+              className="text-sky-600 font-bold text-base"
+              {...props}
+            >
+              {props.children}
+            </Link>
+          );
+        },
+
+        code({ node, inline, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          return !inline && match ? (
+            <SyntaxHighlighter
+              children={String(children).replace(/\n$/, "")}
+              style={docco}
+              language={match[1]}
+              PreTag="div"
+              {...props}
+            />
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    />
+  );
+};
+
+export default Markdown;