improvement(blog): match code blocks and inline code to the in-app editor tokens

Author: waleedlatif1

apps/sim/lib/content/code.tsx

@@ -1,21 +1,26 @@
 'use client'
 
-import { Code } from '@sim/emcn'
+import { Code, chipFieldSurfaceClass, cn } from '@sim/emcn'
 
 interface CodeBlockProps {
   code: string
   language: 'javascript' | 'json' | 'python'
 }
 
+/**
+ * Blog code block. Renders through emcn's read-only `Code.Viewer` wearing the exact same
+ * `chipFieldSurfaceClass` surface the in-app code editor uses (the custom-tools `CodeEditor`),
+ * so a fenced block in a post matches the real editor: same Prism theme, gutter, and font, on
+ * the same theme-following surface (`--surface-5`/`--border-1`, rounded-lg) — no forced dark,
+ * all from existing design tokens.
+ */
 export function CodeBlock({ code, language }: CodeBlockProps) {
   return (
-    <div className='dark w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--code-bg)] text-sm'>
-      <Code.Viewer
-        code={code}
-        showGutter
-        language={language}
-        className='[&_pre]:!pb-0 m-0 rounded-none border-0 bg-transparent'
-      />
-    </div>
+    <Code.Viewer
+      code={code}
+      showGutter
+      language={language}
+      className={cn(chipFieldSurfaceClass, 'w-full overflow-hidden text-sm')}
+    />
   )
 }

apps/sim/lib/content/mdx.tsx

@@ -182,16 +182,21 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     }
     return <pre {...props} className={clsx('my-4 overflow-x-auto rounded-lg', props.className)} />
   },
+  // Inline code chip — matches the rich markdown editor's `.rich-markdown-prose code` exactly
+  // (--surface-5 fill, Martian Mono, 0.875em, 4px radius, 0.125rem/0.375rem padding, no border).
   code: (props: any) => {
     if (!props.className) {
       return (
         <code
           {...props}
           className={clsx(
-            'rounded bg-[var(--surface-hover)] px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-[var(--text-primary)]',
+            'rounded-[4px] bg-[var(--surface-5)] px-[0.375rem] py-[0.125rem] font-normal text-[0.875em] text-[var(--text-primary)]',
             props.className
           )}
-          style={{ fontWeight: 400 }}
+          style={{
+            fontFamily: 'var(--font-martian-mono, ui-monospace, monospace)',
+            fontWeight: 400,
+          }}
         />
       )
     }