chore: update dependencies and integrate rehype-pretty-code

- Removed @shikijs/rehype dependency from package.json and pnpm-lock.yaml.
- Added rehype-pretty-code as a new dependency for enhanced code formatting.
- Updated Markdown component to utilize rehype-pretty-code for rendering code blocks with a specified theme.
- Cleaned up package management files to reflect the changes in dependencies.

package.json

@@ -15,7 +15,6 @@
     "knip": "knip"
   },
   "dependencies": {
-    "@shikijs/rehype": "^1.24.0",
     "@vercel/analytics": "^1.4.1",
     "@vercel/speed-insights": "^1.1.0",
     "date-fns": "^4.1.0",
@@ -26,6 +25,7 @@
     "query-string": "^9.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0"
   },

src/components/md.tsx

@@ -1,6 +1,6 @@
-import rehypeShiki from "@shikijs/rehype";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import Link from "next/link";
+import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
 
@@ -30,7 +30,10 @@ export function Markdown({ children }: { children: string }) {
         }}
         options={{
           mdxOptions: {
-            rehypePlugins: [rehypeSlug, [rehypeShiki, { theme: "dark-plus" }]],
+            rehypePlugins: [
+              rehypeSlug,
+              [rehypePrettyCode, { theme: "dark-plus" }],
+            ],
             remarkPlugins: [remarkGfm],
           },
         }}