From dcfb4ba0b60e97bc44bb3ded093d6e09e24b28bd Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <jon.summers.muir@googlemail.com>
Date: Fri, 19 Feb 2021 12:06:43 +0800
Subject: [PATCH] chore: add remark-gfm to render blogs with tables

---
 www/package.json          | 1 +
 www/pages/blog/[slug].tsx | 9 +++------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/www/package.json b/www/package.json
index 195fb0b6966..2e605525fcf 100644
--- a/www/package.json
+++ b/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"
diff --git a/www/pages/blog/[slug].tsx b/www/pages/blog/[slug].tsx
index 367de70a28f..0d66123f28d 100644
--- a/www/pages/blog/[slug].tsx
+++ b/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: {