feat: Added custom code block

package.json

@@ -30,6 +30,7 @@
 		"next-mdx-remote": "^3.0.6",
 		"next-redux-wrapper": "^7.0.5",
 		"nprogress": "^0.2.0",
+		"prism-react-renderer": "^1.2.1",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"react-redux": "^7.2.6",
@@ -80,4 +81,4 @@
 			"main"
 		]
 	}
-}
+}

src/components/atoms/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,32 @@
+import Highlight, { defaultProps, Language } from 'prism-react-renderer';
+import theme from 'prism-react-renderer/themes/vsDark';
+import { FC } from 'react';
+import { Line, LineContent, LineNo, Pre } from './styles';
+
+export interface CodeBlockProps {
+	className: string;
+}
+
+const CodeBlock: FC<CodeBlockProps> = ({ children, className }) => {
+	const language = className.replace(/language-/, '') as Language;
+	return (
+		<Highlight {...defaultProps} theme={theme} code={children!.toString().trim()} language={language}>
+			{({ className, style, tokens, getLineProps, getTokenProps }) => (
+				<Pre className={className} style={style}>
+					{tokens.map((line, i) => (
+						<Line key={i} {...getLineProps({ line, key: i })}>
+							<LineNo>{i + 1}</LineNo>
+							<LineContent>
+								{line.map((token, key) => (
+									<span key={key} {...getTokenProps({ token, key })} />
+								))}
+							</LineContent>
+						</Line>
+					))}
+				</Pre>
+			)}
+		</Highlight>
+	);
+};
+
+export { CodeBlock };

src/components/atoms/CodeBlock/index.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';

src/components/atoms/CodeBlock/styles.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export const Pre = styled.pre`
+  text-align: left;
+  margin: 1em 0;
+  padding: 16px;
+  overflow: scroll;
+
+  & .token-line {
+    line-height: 1.3em;
+    height: 1.3em;
+  }
+`;
+
+export const Line = styled.div`
+  display: table-row;
+`;
+
+export const LineNo = styled.span`
+  display: table-cell;
+  text-align: right;
+  padding-right: 1em;
+  user-select: none;
+  opacity: 0.5;
+`;
+
+export const LineContent = styled.span`
+  display: table-cell;
+`;

src/pages/blog/[slug].tsx

@@ -7,6 +7,7 @@ import { getAllDocuments, getBySlug } from 'Utils/api';
 
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
+import { CodeBlock } from 'Atoms/CodeBlock';
 import { SeoHead } from 'Atoms/SeoHead';
 import { shimmer } from 'Utils/shimmer';
 import readingTime from 'reading-time';
@@ -27,6 +28,7 @@ export default function BlogPost({ post, mdxSource }: any) {
 			/>
 		),
 		ul: (props: any) => <List {...props} />,
+		code: (props: any) => <CodeBlock {...props} />,
 	};
 
 	const readTime = Math.ceil(readingTime(mdxSource.compiledSource).minutes);

src/styles/globalStyles.ts

@@ -45,14 +45,8 @@ export const GlobalStyles = createGlobalStyle`
 		overflow: visible;
 	}
 	pre {
-		padding: 16px;
-    overflow: auto;
-    font-size: 85%;
-    line-height: 1.45;
-		background-color: ${({ theme }) => theme.codeBlock};
     border-radius: 6px;
 		font-family: "Firacode", monospace;
-		font-size: 1em;
 	}
 	a {
 		background-color: transparent;
@@ -76,11 +70,11 @@ export const GlobalStyles = createGlobalStyle`
 	samp {
     background-color: #afb8c133;
     border-radius: 6px;
+		padding: 3px;
 		color: ${({ theme }) => theme.codeText};
 		font-family: 'Inter', sans-serif;
 	}
 	pre code {
-    background-color: #00000000;
 		font-family: "Firacode", monospace;
 	}
 	small {

yarn.lock

@@ -6527,6 +6527,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prism-react-renderer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89"
+  integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==
+
 proc-log@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-1.0.0.tgz#0d927307401f69ed79341e83a0b2c9a13395eb77"