diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx index 089b038..62dc7e8 100644 --- a/app/integrations/[slug]/page.tsx +++ b/app/integrations/[slug]/page.tsx @@ -10,14 +10,34 @@ import type { Metadata } from 'next' import { notFound } from 'next/navigation' import { MDXRemote } from 'next-mdx-remote/rsc' import remarkGfm from 'remark-gfm' +import rehypeMdxCodeProps from 'rehype-mdx-code-props' import { CodeBlock } from '@ciphera-net/ui' import { integrations, getIntegration } from '@/lib/integrations' import { getIntegrationGuide } from '@/lib/integration-content' import { IntegrationGuide } from '@/components/IntegrationGuide' // * ─── MDX Components ──────────────────────────────────────────── +// Maps markdown code fences to CodeBlock. The `filename` meta is passed +// as a prop via rehype-mdx-code-props (e.g. ```tsx filename="app.tsx"). const mdxComponents = { - CodeBlock, + pre: ({ children }: { children: React.ReactNode }) => children, + code: ({ children, className, filename, ...props }: { + children: React.ReactNode + className?: string + filename?: string + [key: string]: unknown + }) => { + // Block code (inside 
) has className like "language-tsx"
+    if (className?.startsWith('language-') || filename) {
+      return (
+        
+          {String(children).replace(/\n$/, '')}
+        
+      )
+    }
+    // Inline code
+    return {children}
+  },
 }
 
 // * ─── Static Params ─────────────────────────────────────────────
@@ -115,7 +135,7 @@ export default async function IntegrationPage({ params }: PageProps) {
         
       
     
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index 390ce92..22f0f5c 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -2,13 +2,14 @@
  * @file Shared layout component for individual integration guide pages.
  *
  * Provides the background atmosphere, back-link, header (logo + title),
- * prose-styled content area, and a related integrations section.
+ * category badge, prose-styled content area, and a related integrations section.
+ * Styling matches ciphera-website /learn article layout for consistency.
  */
 
 import Link from 'next/link'
 import { ArrowLeftIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import { type ReactNode } from 'react'
-import { type Integration, getIntegration } from '@/lib/integrations'
+import { type Integration, getIntegration, categoryLabels } from '@/lib/integrations'
 
 interface IntegrationGuideProps {
   /** Integration metadata (name, icon, etc.) */
@@ -35,6 +36,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     .filter((i): i is Integration => i !== undefined)
     .slice(0, 4)
 
+  const categoryLabel = categoryLabels[integration.category]
+
   return (
     

       {/* * --- ATMOSPHERE (Background) --- */}
@@ -47,6 +50,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
       

 
       

+        {/* * --- Back link --- */}
         
 
-        

-          

-            {headerIcon}
-          

-          

-            {integration.name} Integration
-          

+        {/* * --- Category + Official site badges --- */}
+        

+          
+            
{integration.icon}

+            {integration.name}
+          
+          
+            {categoryLabel}
+          
         

 
-        

+        {/* * --- Title --- */}
+        

+          {integration.name} Integration
+        

+
+        {/* * --- Prose content (matches ciphera-website /learn styling) --- */}
+        

           {children}
 
           

diff --git a/content/integrations/angular.mdx b/content/integrations/angular.mdx
index 6531696..96e3b4e 100644
--- a/content/integrations/angular.mdx
+++ b/content/integrations/angular.mdx
@@ -16,7 +16,8 @@ Add the script to your `src/index.html` — the single entry point for all Angul
 
 Place the Pulse script inside the `` tag of your Angular app's `src/index.html`.
 
-{`
+```html filename="src/index.html"
+
 
 
   
@@ -34,6 +35,7 @@ Place the Pulse script inside the `` tag of your Angular app's `src/index.
 
   
 
-`}
+
+```
 
 For more details, see the [Angular docs](https://angular.dev/guide/components).
diff --git a/content/integrations/astro.mdx b/content/integrations/astro.mdx
index 974815f..650c18e 100644
--- a/content/integrations/astro.mdx
+++ b/content/integrations/astro.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base layout so it's included on every page of your
 
 Place the Pulse script in the `` of your shared layout component.
 
-{`---
+```html filename="src/layouts/BaseLayout.astro"
+---
 interface Props {
   title: string
 }
@@ -41,7 +42,8 @@ const { title } = Astro.props
 
     
 
-`}
+
+```
 
 If you're using Astro's View Transitions, the script will persist across navigations by default since it's in the ``.
 
diff --git a/content/integrations/django.mdx b/content/integrations/django.mdx
index 063008e..60b5f26 100644
--- a/content/integrations/django.mdx
+++ b/content/integrations/django.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base template with a debug guard.
 
 Use Django's template tags to only load the script when `DEBUG` is `False`.
 
-{`
+```html filename="templates/base.html"
+
 
 
     
@@ -35,7 +36,8 @@ Use Django's template tags to only load the script when `DEBUG` is `False`.
 
     {% block content %}{% endblock %}
 
-`}
+
+```
 
 Make sure to pass `debug` to the template context via `settings.DEBUG`, or use a context processor to make it available globally.
 
diff --git a/content/integrations/drupal.mdx b/content/integrations/drupal.mdx
index 5661548..3cc23f2 100644
--- a/content/integrations/drupal.mdx
+++ b/content/integrations/drupal.mdx
@@ -20,7 +20,8 @@ Install the [Asset Injector](https://www.drupal.org/project/asset_injector) modu
 
 Add the script directly to your theme's `html.html.twig` template in the head area.
 
-{`
+```twig filename="templates/html.html.twig"
+
 
 
     
@@ -40,6 +41,7 @@ Add the script directly to your theme's `html.html.twig` template in the head ar
     {{ page_bottom }}
     
 
-`}
+
+```
 
 For more details, see the [Drupal theming docs](https://www.drupal.org/docs/theming-drupal).
diff --git a/content/integrations/eleventy.mdx b/content/integrations/eleventy.mdx
index 2ad4e5d..5517483 100644
--- a/content/integrations/eleventy.mdx
+++ b/content/integrations/eleventy.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base Nunjucks or Liquid layout.
 
 Place the Pulse script inside the `` of your shared base template.
 
-{`
+```html filename="src/_includes/base.njk"
+
 
 
     
@@ -33,6 +34,7 @@ Place the Pulse script inside the `` of your shared base template.
 
     {{ content | safe }}
 
-`}
+
+```
 
 For more details, see the [Eleventy layouts docs](https://www.11ty.dev/docs/layouts/).
diff --git a/content/integrations/express.mdx b/content/integrations/express.mdx
index 5e7d9ed..7b29768 100644
--- a/content/integrations/express.mdx
+++ b/content/integrations/express.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your template engine's layout (EJS, Pug, Handlebars) or
 
 If you use EJS as your template engine, add the script to your layout with a production guard.
 
-{`
+```html filename="views/layout.ejs"
+
 
 
     
@@ -35,13 +36,15 @@ If you use EJS as your template engine, add the script to your layout with a pro
 
     <%- body %>
 
-`}
+
+```
 
 ## Method 2: Static HTML
 
 If you serve static HTML files via Express, add the script directly.
 
-{`
+```html filename="public/index.html"
+
 
 
     
@@ -58,4 +61,5 @@ If you serve static HTML files via Express, add the script directly.
 
     
Hello World

 
-`}
+
+```
diff --git a/content/integrations/flask.mdx b/content/integrations/flask.mdx
index 140872a..b72e34b 100644
--- a/content/integrations/flask.mdx
+++ b/content/integrations/flask.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your Jinja2 base template with a debug guard.
 
 Use Jinja2's conditional to only load the script when `DEBUG` is off.
 
-{`
+```html filename="templates/base.html"
+
 
 
     
@@ -35,6 +36,7 @@ Use Jinja2's conditional to only load the script when `DEBUG` is off.
 
     {% block content %}{% endblock %}
 
-`}
+
+```
 
 For more details, see the [Flask template docs](https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/).
diff --git a/content/integrations/framer.mdx b/content/integrations/framer.mdx
index aec9208..0d67b55 100644
--- a/content/integrations/framer.mdx
+++ b/content/integrations/framer.mdx
@@ -16,10 +16,12 @@ Add the Pulse script to your Framer project's custom code settings.
 
 Go to **Project Settings -> General -> Custom Code -> Head** and paste the Pulse script.
 
-{``}
+>
+```
 
 For more details, see the [Framer custom code docs](https://www.framer.com/help/articles/custom-code/).
diff --git a/content/integrations/gatsby.mdx b/content/integrations/gatsby.mdx
index 2c83a7f..3cdc0d4 100644
--- a/content/integrations/gatsby.mdx
+++ b/content/integrations/gatsby.mdx
@@ -16,7 +16,8 @@ Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.
 
 Use the `onRenderBody` hook to inject the Pulse script into every page's ``.
 
-{`import React from "react"
+```jsx filename="gatsby-ssr.js"
+import React from "react"
 
 export const onRenderBody = ({ setHeadComponents }) => {
   setHeadComponents([
@@ -27,13 +28,15 @@ export const onRenderBody = ({ setHeadComponents }) => {
       src="https://pulse.ciphera.net/script.js"
     />,
   ])
-}`}
+}
+```
 
 ## Method 2: Gatsby Head API (v4.19+)
 
 If you're on Gatsby 4.19 or later, you can use the Head export in any page or template component.
 
-{`import React from "react"
+```tsx filename="src/pages/index.tsx"
+import React from "react"
 
 export function Head() {
   return (
@@ -47,6 +50,7 @@ export function Head() {
 
 export default function IndexPage() {
   return 
Hello World

-}`}
+}
+```
 
 For more details, see the [Gatsby Head API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/).
diff --git a/content/integrations/ghost.mdx b/content/integrations/ghost.mdx
index 9a1f01f..2d98533 100644
--- a/content/integrations/ghost.mdx
+++ b/content/integrations/ghost.mdx
@@ -16,11 +16,13 @@ Use Ghost's built-in Code Injection feature to add the Pulse script — no theme
 
 Go to **Settings -> Code injection -> Site Header** and paste the Pulse script.
 
-{``}
+>
+```
 
 Alternatively, you can add the script directly to your theme's `default.hbs` template file.
 
diff --git a/content/integrations/gtm.mdx b/content/integrations/gtm.mdx
index e3206c7..1d2ece0 100644
--- a/content/integrations/gtm.mdx
+++ b/content/integrations/gtm.mdx
@@ -21,7 +21,9 @@ Follow these steps to add Pulse through GTM:
 3. Set the trigger to **All Pages**
 4. Publish your container
 
-{``}
+```html filename="GTM -> Custom HTML Tag"
+
+```
 
 That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.
 
@@ -30,10 +32,12 @@ That's it. Pulse auto-detects the domain from the page, so no extra configuratio
 
 If your site is registered under a different domain than the page hostname, or you need custom options (API endpoint, storage mode, etc.), use `pulseConfig`:
 
-{`
-`}
+
+```
 
 
 For more details, see the [GTM Custom HTML tag docs](https://support.google.com/tagmanager/answer/6103696).
diff --git a/content/integrations/hugo.mdx b/content/integrations/hugo.mdx
index 8d0e4a5..268cf4c 100644
--- a/content/integrations/hugo.mdx
+++ b/content/integrations/hugo.mdx
@@ -16,19 +16,22 @@ Add the Pulse script via a Hugo partial or directly in your base template.
 
 Create an analytics partial with a production guard using Hugo's `.Site.IsServer` flag.
 
-{`{{ if not .Site.IsServer }}
+```html filename="layouts/partials/analytics.html"
+{{ if not .Site.IsServer }}
 
-{{ end }}`}
+{{ end }}
+```
 
 ## Method 2: Include the partial in your base layout
 
 Add the partial to your `baseof.html` layout.
 
-{`
+```html filename="layouts/_default/baseof.html"
+
 
 
     
@@ -39,6 +42,7 @@ Add the partial to your `baseof.html` layout.
 
     {{ block "main" . }}{{ end }}
 
-`}
+
+```
 
 For more details, see the [Hugo partials docs](https://gohugo.io/templates/partials/).
diff --git a/content/integrations/laravel.mdx b/content/integrations/laravel.mdx
index 9364a2a..89d77f2 100644
--- a/content/integrations/laravel.mdx
+++ b/content/integrations/laravel.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your Blade layout template with a production guard.
 
 Use Laravel's `@production` directive to only load the script in production.
 
-{`
+```php filename="resources/views/layouts/app.blade.php"
+
 
 
     
@@ -36,6 +37,7 @@ Use Laravel's `@production` directive to only load the script in production.
 
     @yield('content')
 
-`}
+
+```
 
 For more details, see the [Laravel @production docs](https://laravel.com/docs/blade#the-production-directive).
diff --git a/content/integrations/nextjs.mdx b/content/integrations/nextjs.mdx
index 0f8db65..8c3a166 100644
--- a/content/integrations/nextjs.mdx
+++ b/content/integrations/nextjs.mdx
@@ -16,7 +16,8 @@ The best way to add Pulse to your Next.js application is using the built-in `nex
 
 Add the Pulse script to your root layout so it loads on every page.
 
-{`import Script from 'next/script'
+```tsx filename="app/layout.tsx"
+import Script from 'next/script'
 
 export default function RootLayout({
   children,
@@ -36,13 +37,15 @@ export default function RootLayout({
       {children}
     
   )
-}`}
+}
+```
 
 ## Method 2: Pages Router
 
 If you're using the Pages Router, add the script to your custom `_app.tsx`.
 
-{`import Script from 'next/script'
+```tsx filename="pages/_app.tsx"
+import Script from 'next/script'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -57,7 +60,8 @@ export default function App({ Component, pageProps }: AppProps) {
       
     
   )
-}`}
+}
+```
 
 ## Configuration options
 
diff --git a/content/integrations/nuxt.mdx b/content/integrations/nuxt.mdx
index 68701a2..34a0387 100644
--- a/content/integrations/nuxt.mdx
+++ b/content/integrations/nuxt.mdx
@@ -16,7 +16,8 @@ Configure Pulse analytics in your `nuxt.config` for a framework-native setup.
 
 Add the Pulse script via the `app.head` option in your Nuxt 3 config.
 
-{`export default defineNuxtConfig({
+```tsx filename="nuxt.config.ts"
+export default defineNuxtConfig({
   app: {
     head: {
       script: [
@@ -28,13 +29,15 @@ Add the Pulse script via the `app.head` option in your Nuxt 3 config.
       ],
     },
   },
-})`}
+})
+```
 
 ## Method 2: Nuxt 2
 
 In Nuxt 2, use the `head` property in your config.
 
-{`export default {
+```jsx filename="nuxt.config.js"
+export default {
   head: {
     script: [
       {
@@ -44,6 +47,7 @@ In Nuxt 2, use the `head` property in your config.
       },
     ],
   },
-}`}
+}
+```
 
 For more details, see the [Nuxt head config docs](https://nuxt.com/docs/api/nuxt-config#head).
diff --git a/content/integrations/rails.mdx b/content/integrations/rails.mdx
index 6282942..edeac3d 100644
--- a/content/integrations/rails.mdx
+++ b/content/integrations/rails.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your application layout with a production environment gu
 
 Use an `if` guard to only load the script in production.
 
-{`
+```erb filename="app/views/layouts/application.html.erb"
+
 
 
   
@@ -37,6 +38,7 @@ Use an `if` guard to only load the script in production.
 
   <%= yield %>
 
-`}
+
+```
 
 For more details, see the [Rails layout docs](https://guides.rubyonrails.org/layouts_and_rendering.html).
diff --git a/content/integrations/react.mdx b/content/integrations/react.mdx
index fd8c566..cf25fc1 100644
--- a/content/integrations/react.mdx
+++ b/content/integrations/react.mdx
@@ -16,7 +16,8 @@ For standard React SPAs, add the script to your `index.html`.
 
 The simplest approach is to add the Pulse script directly to your HTML entry point.
 
-{`
+```html filename="public/index.html"
+
 
 
     
@@ -33,13 +34,15 @@ The simplest approach is to add the Pulse script directly to your HTML entry poi
 
     

 
-`}
+
+```
 
 ## Method 2: Programmatic injection via useEffect
 
 If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
 
-{`import { useEffect } from 'react'
+```tsx filename="src/App.tsx"
+import { useEffect } from 'react'
 
 function App() {
   useEffect(() => {
@@ -53,4 +56,5 @@ function App() {
   }, [])
 
   return 
Hello World

-}`}
+}
+```
diff --git a/content/integrations/remix.mdx b/content/integrations/remix.mdx
index 9a5f56c..938548c 100644
--- a/content/integrations/remix.mdx
+++ b/content/integrations/remix.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your `app/root.tsx` so it's included on every route.
 
 The root route is the top-level layout in Remix. Add the Pulse script inside the `` section.
 
-{`import {
+```tsx filename="app/root.tsx"
+import {
   Links,
   Meta,
   Outlet,
@@ -45,6 +46,7 @@ export default function App() {
       
     
   )
-}`}
+}
+```
 
 For more details, see the [Remix root docs](https://remix.run/docs/en/main/file-conventions/root).
diff --git a/content/integrations/script-tag.mdx b/content/integrations/script-tag.mdx
index 6fb4163..8b34e1a 100644
--- a/content/integrations/script-tag.mdx
+++ b/content/integrations/script-tag.mdx
@@ -16,14 +16,16 @@ Add Pulse to any website by pasting a single script tag into your HTML. This wor
 
 Add the following script tag inside the `` section of your website:
 
-{`
+```html filename="index.html"
+
   
   
-`}
+
+```
 
 ## Configuration
 
diff --git a/content/integrations/shopify.mdx b/content/integrations/shopify.mdx
index 1e0defd..1f5327a 100644
--- a/content/integrations/shopify.mdx
+++ b/content/integrations/shopify.mdx
@@ -16,12 +16,14 @@ Add the Pulse script via the Shopify theme editor — no app needed.
 
 Go to **Online Store -> Themes -> Edit code** and open `layout/theme.liquid`. Add the Pulse script before the closing `` tag.
 
-{`
+```liquid filename="layout/theme.liquid"
+
 `}
+>
+```
 
 ## Method 2: Shopify Plus — Customer Events
 
diff --git a/content/integrations/squarespace.mdx b/content/integrations/squarespace.mdx
index 1229a86..f42eaeb 100644
--- a/content/integrations/squarespace.mdx
+++ b/content/integrations/squarespace.mdx
@@ -16,11 +16,13 @@ Use Squarespace's Code Injection feature to add the Pulse script.
 
 Go to **Settings -> Developer Tools -> Code Injection -> Header** and paste the Pulse script.
 
-{``}
+>
+```
 
 **Note:** Code Injection requires a Business or Commerce plan.
 
diff --git a/content/integrations/svelte.mdx b/content/integrations/svelte.mdx
index 8f64611..3877ff3 100644
--- a/content/integrations/svelte.mdx
+++ b/content/integrations/svelte.mdx
@@ -16,7 +16,8 @@ Add the script to your `index.html` for Vite-based Svelte, or use `
 
 For standard Svelte projects using Vite, add the Pulse script to your `index.html`.
 
-{`
+```html filename="index.html"
+
 
 
     
@@ -34,13 +35,15 @@ For standard Svelte projects using Vite, add the Pulse script to your `index.htm
     

     
 
-`}
+
+```
 
 ## Method 2: SvelteKit
 
 In SvelteKit, use `` in your root layout to add the script to every page.
 
-{`
+```svelte filename="src/routes/+layout.svelte"
+
   
 
 
-`}
+
+```
 
 Alternatively, you can add the script directly to `src/app.html` in your SvelteKit project.
diff --git a/content/integrations/vue.mdx b/content/integrations/vue.mdx
index 2d3df51..fba88cc 100644
--- a/content/integrations/vue.mdx
+++ b/content/integrations/vue.mdx
@@ -16,7 +16,8 @@ Add the script to your `index.html` — works for both Vue CLI and Vite-based pr
 
 Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pulse script inside the `` tag.
 
-{`
+```html filename="index.html"
+
 
 
     
@@ -34,6 +35,7 @@ Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pul
     

     
 
-`}
+
+```
 
 Looking for Nuxt? Check the dedicated [Nuxt guide](/integrations/nuxt).
diff --git a/content/integrations/webflow.mdx b/content/integrations/webflow.mdx
index 91239bf..6409569 100644
--- a/content/integrations/webflow.mdx
+++ b/content/integrations/webflow.mdx
@@ -16,11 +16,13 @@ Paste the Pulse script into your Webflow project's custom code settings.
 
 Go to **Project Settings -> Custom Code -> Head Code** and paste the Pulse script.
 
-{``}
+>
+```
 
 **Note:** Custom code requires a paid Webflow site plan. The script won't appear in the Designer preview — publish your site to see it in action.
 
diff --git a/content/integrations/wix.mdx b/content/integrations/wix.mdx
index 1ab7977..15a01ed 100644
--- a/content/integrations/wix.mdx
+++ b/content/integrations/wix.mdx
@@ -16,11 +16,13 @@ Use Wix's Custom Code settings to add the Pulse script.
 
 Go to **Settings -> Custom Code -> Add Custom Code**. Set the placement to **Head** and apply it to **All pages**.
 
-{``}
+>
+```
 
 **Note:** Custom Code requires a Wix Premium plan.
 
diff --git a/content/integrations/wordpress.mdx b/content/integrations/wordpress.mdx
index 1223536..d4043f2 100644
--- a/content/integrations/wordpress.mdx
+++ b/content/integrations/wordpress.mdx
@@ -16,11 +16,13 @@ Add the Pulse script via a plugin or by editing your theme's header file directl
 
 The easiest way is to use the [WPCode (Insert Headers and Footers)](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. Install it, then go to **Code Snippets -> Header & Footer** and paste the Pulse script into the Header section.
 
-{``}
+>
+```
 
 ## Method 2: Edit header.php directly
 
diff --git a/package-lock.json b/package-lock.json
index 11d2877..ed21384 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "react-markdown": "^10.1.0",
         "react-use-measure": "^2.1.7",
         "recharts": "^2.15.0",
+        "rehype-mdx-code-props": "^3.0.1",
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
@@ -9918,6 +9919,18 @@
         "node": ">= 12"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.5.0.tgz",
+      "integrity": "sha512-aMV56R27Gv3QmfmF1MY12GWkGzzeAezAX+UplqHVASfjc9wNzI/X6hC0S9oxq61WT4aQesLGslWP9tKk6ghRZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
@@ -10616,6 +10629,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-properties-to-mdx-jsx-attributes": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-properties-to-mdx-jsx-attributes/-/hast-util-properties-to-mdx-jsx-attributes-1.1.1.tgz",
+      "integrity": "sha512-MMrAoGgvhYULEqMB/r6AlcVz1D3Cyml/9cMB2NIqZsIsEJ+XEXPMqH0gjba8dVs9AnQUYvPReAS+OIYx4ip+Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "estree-util-value-to-estree": "^3.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "property-information": "^7.0.0",
+        "style-to-js": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/hast-util-to-estree": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
@@ -14383,6 +14413,24 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-mdx-code-props": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-mdx-code-props/-/rehype-mdx-code-props-3.0.1.tgz",
+      "integrity": "sha512-BWWKn0N6r7/qd7lbLgv5J8of7imz1l1PyCNoY7BH0AOR9JdJlQIfA9cKqTZVEb2h2GPKh473qrBajF0i01fq3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-properties-to-mdx-jsx-attributes": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/rehype-recma": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",
diff --git a/package.json b/package.json
index c3ce286..0260841 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "react-markdown": "^10.1.0",
     "react-use-measure": "^2.1.7",
     "recharts": "^2.15.0",
+    "rehype-mdx-code-props": "^3.0.1",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",