feat: gfm support

src/components/markdown.jsx

@@ -1,6 +1,7 @@
 import rehypeMathjax from "rehype-mathjax";
 import remarkMath from "remark-math";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { darcula, github } from "react-syntax-highlighter/dist/esm/styles/hljs";
@@ -31,7 +32,7 @@ function RenderMarkdown(props) {
   return (
     <ReactMarkdown
       children={props.children}
-      remarkPlugins={[remarkMath]}
+      remarkPlugins={[remarkMath, remarkGfm]}
       rehypePlugins={[rehypeMathjax]}
       components={{
         code: CodeBlock,

src/index.css

@@ -56,13 +56,29 @@
     @apply p-1;
     @apply rounded-lg;
     @apply bg-zinc-200 border-zinc-400;
-    @apply dark:bg-zinc-800 dark:border-zinc-600;
+    @apply dark:bg-zinc-800 dark:border-zinc-600 overflow-scroll;
   }
 
   .md a {
     @apply inline-block bg-transparent text-blue-600;
   }
 
+  .md table {
+    @apply w-1/2;
+    border-style: hidden;
+  }
+
+  
+
+  .md table thead {
+    @apply bg-zinc-200 dark:bg-zinc-800;
+    
+  }
+
+  .md table tr {
+    @apply border-2 border-zinc-400;
+  }
+
   .md img {
     @apply w-96 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 rounded-2xl hover:drop-shadow-2xl transition duration-500 lg:ml-5;
   }