yarn add remark-gfm chakra-ui-markdown-renderer

package.json

@@ -19,6 +19,7 @@
     "@mdx-js/loader": "^2.1.3",
     "@mdx-js/react": "^2.1.3",
     "@next/mdx": "^12.3.0",
+    "chakra-ui-markdown-renderer": "^4.1.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^7.3.2",
     "gray-matter": "^4.0.3",
@@ -27,7 +28,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.3",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.5",

src/pages/[...slug].tsx

@@ -7,6 +7,8 @@ import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import { textStyles } from '../theme/foundations';
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
+import gfm from 'remark-gfm';
 
 const MATTER_OPTIONS = {
   engines: {
@@ -73,7 +75,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
     <>
       <main>
         <Heading as='h1' mb={5} {...textStyles.header1}>{frontmatter.title}</Heading>
-        <ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
+        <ReactMarkdown remarkPlugins={[gfm]} components={ChakraUIRenderer(MDXComponents)}>{content}</ReactMarkdown>
       </main>
     </>
   );