margin in code and pre tags

components/StyledMarkdown.tsx

@@ -12,7 +12,7 @@ import { Components } from "react-markdown";
 import { generateSlug } from "../utils/general";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { useEffect } from "react";
+
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
 SyntaxHighlighter.registerLanguage("scss", scss);

styles/globals.css

@@ -40,4 +40,8 @@ h2 > a:hover::before,
 h3 > a:hover::before,
 h4 > a:hover::before {
   @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-600;
+}
+
+div > code, pre > code {
+  @apply p-0 m-0 !important
 }