added syntax highlighting

src/app/blog/[id]/MarkdownRenderer.tsx

@@ -1,6 +1,36 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { gruvboxDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-export default function MarkdownRenderer({ children }: { children: string }) {
-  return <ReactMarkdown>{children}</ReactMarkdown>;
-};
+type MarkdownRendererProps = {
+  children: string;
+};
+
+export default function MarkdownRenderer({ children: markdown }: MarkdownRendererProps) {
+  return (
+    <Markdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        code({ node, inline, className, children, ...props }: any) {
+          const match = /language-(\w+)/.exec(className || '');
+
+          return !inline && match ? (
+            <SyntaxHighlighter style={gruvboxDark} PreTag="div" language={match[1]} {...props}>
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {markdown}
+    </Markdown>
+  );
+}