fezcode
diff --git a/‎src/index.css‎
Lines changed: 4 additions & 1 deletion b/‎src/index.css‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎src/pages/BlogPostPage.js‎
Lines changed: 24 additions & 1 deletion b/‎src/pages/BlogPostPage.js‎
Lines changed: 24 additions & 1 deletion
@@ -39,8 +39,11 @@ code {
 }
 
 /* Styling for inline code blocks */
+.prose code.undefined:not(pre > code) {
+  background-color: #242424;
+}
+
 .prose code:not(pre > code) {
-  background-color: #242424; /* gray-600 */ /* Changed background color */
   color: #f87171; /* primary-400 - Reverted color */
   padding: 0.2em 0.4em;
   border-radius: 0.25rem;
 
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { customTheme } from '../utils/customTheme';
 import PostMetadata from '../components/PostMetadata';
 import { ArrowLeftIcon, ArrowSquareOutIcon } from '@phosphor-icons/react';
 
@@ -13,6 +15,27 @@ const LinkRenderer = ({ href, children }) => {
   );
 };
 
+
+
+const CodeBlock = ({ node, inline, className, children, ...props }) => {
+  const match = /language-(\w+)/.exec(className || '');
+  return !inline && match ? (
+    <SyntaxHighlighter
+      style={customTheme}
+      language={match[1]}
+      PreTag="div"
+      {...props}
+      codeTagProps={{ style: { fontFamily: "'JetBrains Mono', monospace" } }}
+    >
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
+  ) : (
+    <code className={`${className} font-mono bg-gray-800`} {...props}>
+      {children}
+    </code>
+  );
+};
+
 const BlogPostPage = () => {
   const { slug } = useParams();
   const [post, setPost] = useState(null);
@@ -121,7 +144,7 @@ const BlogPostPage = () => {
               <ArrowLeftIcon size={24} /> Back to Home
             </Link>
             <div ref={contentRef} className="prose prose-xl prose-dark max-w-none">
-              <ReactMarkdown components={{ a: LinkRenderer }}>{post.body}</ReactMarkdown>
+              <ReactMarkdown components={{ a: LinkRenderer, code: CodeBlock }}>{post.body}</ReactMarkdown>
             </div>
           </div>
           <div className="hidden lg:block">