Enhance code block styling with rehype-pretty-code integration and update package dependencies

app/globals.css

@@ -64,3 +64,69 @@ body {
 .hide-native-cursor * {
   cursor: none;
 }
+
+/* ── Code blocks (syntax highlighted via rehype-pretty-code) ── */
+.prose pre {
+  background: rgba(0, 20, 60, 0.72) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 0.6rem;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  padding: 1.25rem 1.5rem;
+  overflow-x: auto;
+  position: relative;
+}
+
+/* Language badge */
+.prose pre[data-language]::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0.45rem;
+  right: 0.75rem;
+  font-size: 0.68rem;
+  font-family: var(--font-mono), monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(135, 200, 240, 0.65);
+  pointer-events: none;
+}
+
+.prose pre code {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  font-size: 0.875em;
+  color: inherit;
+}
+
+/* Scrollbar inside code blocks */
+.prose pre::-webkit-scrollbar {
+  height: 5px;
+}
+.prose pre::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+.prose pre::-webkit-scrollbar-thumb {
+  background: rgba(100, 180, 255, 0.35);
+  border-radius: 3px;
+}
+
+/* ── Inline code ── */
+.prose :not(pre) > code {
+  background: rgba(100, 180, 255, 0.18) !important;
+  border: 1px solid rgba(100, 180, 255, 0.38) !important;
+  color: #0048c8 !important;
+  border-radius: 0.3rem !important;
+  padding: 0.1em 0.4em !important;
+  font-size: 0.88em !important;
+  font-weight: 500 !important;
+}
+
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+  content: none !important;
+}

app/posts/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { getPostData, getAllPostIds } from "@/lib/posts";
 import type { PostData } from "@/lib/posts";
 import Window from "../../../components/window";
 import { MDXRemote } from "next-mdx-remote/rsc";
+import rehypePrettyCode from "rehype-pretty-code";
 
 interface PageProps {
   params: {
@@ -45,7 +46,22 @@ export default async function Post({ params }: PageProps) {
             </span>
           </div>
           <div className="prose lg:prose-xl max-w-none">
-            <MDXRemote source={postData.content} />
+            <MDXRemote
+              source={postData.content}
+              options={{
+                mdxOptions: {
+                  rehypePlugins: [
+                    [
+                      rehypePrettyCode,
+                      {
+                        theme: "github-dark-dimmed",
+                        keepBackground: false,
+                      },
+                    ],
+                  ],
+                },
+              }}
+            />
           </div>
         </article>
       </Window>