chore: add remark-gfm to render blogs with tables

www/package.json

@@ -28,6 +28,7 @@
     "react-syntax-highlighter": "^15.3.1",
     "react-transition-group": "^4.4.1",
     "remark": "11.0.2",
+    "remark-gfm": "^1.0.0",
     "remark-html": "10.0.0",
     "typescript": "^4.0.3",
     "uuid": "^8.3.2"

www/pages/blog/[slug].tsx

@@ -6,6 +6,7 @@ import DefaultLayout from '~/components/Layouts/Default'
 import authors from 'lib/authors.json'
 import blogStyles from './[slug].module.css'
 const toc = require('markdown-toc')
+const gfm = require('remark-gfm')
 
 function BlogPostPage(props: any) {
   // @ts-ignore
@@ -62,14 +63,14 @@ function BlogPostPage(props: any) {
           <Typography.Text className="block mb-4 underline">Table of contents</Typography.Text>
           <Typography>
             <div className={blogStyles['toc']}>
-              <ReactMarkdown>{props.blog.toc.content}</ReactMarkdown>
+              <ReactMarkdown plugins={[gfm]}>{props.blog.toc.content}</ReactMarkdown>
             </div>
           </Typography>
         </div>
         <div className="container mx-auto px-8 sm:px-16 xl:px-20">
           <div className="max-w-7xl">
             <Typography>
-              <ReactMarkdown renderers={{ heading: HeadingRenderer }}>
+              <ReactMarkdown plugins={[gfm]} renderers={{ heading: HeadingRenderer }}>
                 {props.blog.content}
               </ReactMarkdown>
             </Typography>
@@ -105,10 +106,6 @@ export async function getStaticProps(context: any) {
   //   .use(html)
   //   .process(content) // pass content to process)
 
-  console.log(toc(content))
-
-  console.log(typeof content)
-
   return {
     props: {
       blog: {