resolve headers, lists, link, paragraph..

src/components/Markdown.tsx

@@ -16,6 +16,7 @@ import Heading from "./typography/Heading";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import Link from "./typography/Link";
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
 
 export type Props = {
   markdown: string;
@@ -27,19 +28,126 @@ const Markdown = ({ markdown }: Props) => {
       remarkPlugins={[remarkGfm]}
       children={markdown}
       components={{
-        h1: Heading,
+        ul: ({ node, ...props }) => (
-        h2: Typography,
+          <ul
-        a: (props) => {
+            style={{
-          return (
+              listStyleType: "disc",
-            <Link
+            }}
-              href={props.href}
+            className="mx-8"
-              className="text-sky-600 font-bold text-base"
             {...props}
-            >
+          />
-              {props.children}
+        ),
-            </Link>
+
-          );
+        ol: ({ node, ...props }) => (
-        },
+          <ol className="list-decimal mx-8" {...props} />
+        ),
+
+        h1: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+              marginBlockStart: 11,
+              marginBlockEnd: 11,
+
+              fontSize: 32,
+            }}
+            {...props}
+          />
+        ),
+
+        h2: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 13.28,
+              marginBlockEnd: 13.28,
+
+              fontSize: 24,
+            }}
+            {...props}
+          />
+        ),
+
+        h3: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 16,
+              marginBlockEnd: 16,
+
+              fontSize: 18.72,
+            }}
+            {...props}
+          />
+        ),
+
+        h4: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 21.28,
+              marginBlockEnd: 21.28,
+            }}
+            {...props}
+          />
+        ),
+
+        h5: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 26.72,
+              marginBlockEnd: 26.72,
+
+              fontSize: 13.28,
+            }}
+            {...props}
+          />
+        ),
+
+        h6: ({ node, ...props }) => (
+          <h1
+            style={{
+              fontWeight: "bold",
+
+              marginInlineEnd: 0,
+              marginInlineStart: 0,
+
+              marginBlockStart: 37.28,
+              marginBlockEnd: 37.28,
+
+              fontSize: 10.72,
+            }}
+            {...props}
+          />
+        ),
+        p: Typography,
+
+        a: ({ node, ...props }) => (
+          <Link
+            className=" inline-flex text-sm font-bold text-blue-500"
+            {...props}
+          />
+        ),
+
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
           return !inline && match ? (