Add code blocks feature to content

pages/blog/[slug].tsx

@@ -2,6 +2,7 @@ import { FC, useEffect } from 'react';
 import { getBlogPostsSlugs, getBlogPostdata } from '../../lib/blog';
 import { useRouter } from 'next/router';
 import { MdxRemote } from 'next-mdx-remote/types';
+import { MDXProvider } from '@mdx-js/react';
 import { MDXEmbedProvider } from 'mdx-embed';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import renderToString from 'next-mdx-remote/render-to-string';
@@ -11,6 +12,7 @@ import matter from 'gray-matter';
 import AllComponents from '../../components/All';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
+import CodeBlock from '../../components/CodeBlock';
 
 interface Props {
 	source: MdxRemote.Source;
@@ -89,11 +91,7 @@ const Wrapper = styled.div`
 			font-size: 1.1rem;
 		}
 
-		p,
-		h1,
-		h2,
-		h3,
-		button {
+		& > * {
 			margin: 0.5rem 0rem;
 		}
 
@@ -156,6 +154,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter.title}</h1>
+					<p>{frontMatter.description}</p>
 					<p>
 						Written by <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b>
 					</p>
@@ -168,9 +167,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 					)}
 					<hr />
 				</div>
-				<MDXEmbedProvider>
-					<div className='content'>{content}</div>
-				</MDXEmbedProvider>
+				<MDXProvider components={{ code: CodeBlock }}>
+					<MDXEmbedProvider>
+						<div className='content'>{content}</div>
+					</MDXEmbedProvider>
+				</MDXProvider>
 			</Wrapper>
 		</>
 	);