style: 💄 rehype and remark plugins for mdx

next.config.ts

@@ -3,14 +3,29 @@ import createMDX from "@next/mdx";
 
 const nextConfig = {
   pageExtensions: ["mdx", "ts", "tsx"],
-  experimental: {
-    mdxRs: {
-      mdxType: "gfm",
-    },
-  },
 } as NextConfig;
 
-const withMDX = createMDX({});
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [["remark-gfm", { strict: true, throwOnError: true }]],
+    rehypePlugins: [
+      ["rehype-pretty-code", { strict: true, throwOnError: true }],
+      ["rehype-slug", { strict: true, throwOnError: true }],
+      [
+        "rehype-autolink-headings",
+        {
+          strict: true,
+          throwOnError: true,
+          behavior: "append",
+          properties: {
+            className: ["subheading-anchor"],
+            ariaLabel: "Link to section",
+          },
+        },
+      ],
+    ],
+  },
+});
 
 // Merge MDX config with Next.js config
 export default withMDX(nextConfig);

package.json

@@ -4,14 +4,15 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier --write .",
     "type-check": "tsc --build"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
     "@next/mdx": "^15.1.3",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -35,6 +36,10 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0",
     "sugar-high": "^0.7.5"
   },
   "devDependencies": {

src/services/get-project.ts

@@ -7,6 +7,10 @@ import { PROJECT_PATH } from "./consts";
 import { getSource } from "./utils";
 import { Project, ProjectMeta } from "@/types/domain";
 import { ReactElement } from "react";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
 
 type ProjectContent = {
   content: ReactElement;
@@ -25,6 +29,22 @@ export const getProject = async (
     source,
     options: {
       parseFrontmatter: true,
+      mdxOptions: {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [
+          rehypeSlug,
+          rehypePrettyCode,
+          [
+            rehypeAutolinkHeadings,
+            {
+              properties: {
+                className: ["subheading-anchor"],
+                ariaLabel: "Link to section",
+              },
+            },
+          ],
+        ],
+      },
     },
     components: { ...components },
   });

src/styles/globals.css

@@ -209,3 +209,5 @@
     @apply bg-background text-foreground m-2 transition duration-300;
   }
 }
+
+@import "./mdx.css";

src/styles/mdx.css

@@ -0,0 +1,40 @@
+[data-rehype-pretty-code-fragment] code {
+  @apply text-foreground grid min-w-full rounded-none border-0 bg-transparent p-0 text-sm break-words;
+  counter-reset: line;
+  box-decoration-break: clone;
+}
+[data-rehype-pretty-code-fragment] .line {
+  @apply px-4 py-1;
+}
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: gray;
+}
+[data-rehype-pretty-code-fragment] .line--highlighted {
+  @apply bg-accent/10;
+}
+[data-rehype-pretty-code-fragment] .line-highlighted span {
+  @apply relative;
+}
+[data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply bg-accent/10 rounded-md p-1;
+}
+[data-rehype-pretty-code-title] {
+  @apply mt-4 px-4 py-2 text-sm font-medium;
+}
+[data-rehype-pretty-code-title] + pre {
+  @apply mt-0;
+}
+.subheading-anchor {
+  .icon {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-link'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
+    width: 18px;
+    display: inline-block;
+    margin-left: 8px;
+  }
+}