From 2af31fa5c8877a363e7614fe6ded066c46611a31 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:42:02 -0500
Subject: [PATCH] fix: enhance inline code styling in mdx-components

- Distinguish inline vs block code in <code> component
- Inline code: bg-ink/[0.06] light / bg-white/[0.08] dark, no language classes
- Block code: pass className through unchanged (no double-styling)
- <pre> component: remove bg-surface/rounded-xl/overflow-x-auto/p-4
- <pre> now relies on globals.css for block code styling
---
 mdx-components.tsx | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/mdx-components.tsx b/mdx-components.tsx
index 79e75a0..984294a 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -44,16 +44,25 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
         </a>
       )
     },
-    code: ({ children, ...props }) => (
-      <code
-        {...props}
-        className="rounded bg-surface px-[0.3rem] py-[0.2rem] font-mono text-sm text-ink"
-      >
-        {children}
-      </code>
-    ),
-    pre: ({ children, ...props }) => (
-      <pre {...props} className="overflow-x-auto rounded-xl bg-surface text-sm my-6 p-4">
+    code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      const language = match ? match[1] : '';
+      const isInline = !className?.includes('language-');
+
+      if (isInline) {
+        return (
+          <code
+            className="rounded-md bg-ink/[0.06] px-1.5 py-[0.15rem] font-mono text-[0.8125rem] leading-[1.4] dark:bg-white/[0.08]"
+            {...props}
+          >
+            {children}
+          </code>
+        );
+      }
+      return <code className={className} {...props} />;
+    },
+    pre: ({ children, ...props }: { children: React.ReactNode; [key: string]: any }) => (
+      <pre className="my-6 p-0" {...props}>
         {children}
       </pre>
     ),