diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx
index 2ae8501..d1ca716 100644
--- a/components/DocsSidebarNavigation.jsx
+++ b/components/DocsSidebarNavigation.jsx
@@ -1,7 +1,7 @@
-import { gql } from '@apollo/client'
-import clsx from 'clsx'
-import Link from 'next/link'
-import { useState } from 'react'
+import { gql } from '@apollo/client';
+import clsx from 'clsx';
+import Link from 'next/link';
+import { useState } from 'react';
 
 DocsSidebarNavigation.fragment = gql`
   fragment DocsSidebarNavigationFragment on RootQuery {
@@ -18,7 +18,7 @@ DocsSidebarNavigation.fragment = gql`
       }
     }
   }
-`
+`;
 
 export function DocsSidebarNavigation({ className, data, navigation }) {
   const isActiveSection = (section, currentNode) => {
@@ -50,36 +50,28 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
         {navigation.map((section) => (
           <li key={section.title}>
             <div className="flex items-center">
-              <Link href={section.href} className='block w-full'>
-                <h2 className="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
+              <Link href={section.href} passHref>
+                <h2 className="block w-full cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
                   {section.title}
                 </h2>
               </Link>
-              <div className="ml-auto mr-0 inline-flex items-center justify-center rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
-                <button
-                  onClick={() => toggleSection(section.title)}
-                  className="p-2 text-slate-900 transition-transform duration-300 dark:text-white"
+              <button
+                onClick={() => toggleSection(section.title)}
+                className="ml-auto p-2 text-slate-900 transition-transform duration-300 dark:text-white"
+              >
+                <svg
+                  className={clsx(
+                    'h-4 w-4 transition-transform',
+                    expandedSections[section.title] && 'rotate-180'
+                  )}
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
                 >
-                  <svg
-                    className={clsx(
-                      '',
-                      expandedSections[section.title] && 'rotate-90',
-                      'h-4 w-4'
-                    )}
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </button>
-                </div>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
             </div>
             <ul
               role="list"
@@ -93,14 +85,11 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
             >
               {section.links.map((link) => (
                 <li key={link.href} className="relative pl-3.5">
-                  <Link
-                    href={link.href}
-                    className={clsx(
-                      'block',
-                      link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
-                    )}
-                  >
-                    {link.title}
+                  <Link href={link.href}                       className={clsx(
+                        'block',
+                        link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
+                      )}>
+                      {link.title}
                   </Link>
                 </li>
               ))}
diff --git a/components/MiniGraphiQL.jsx b/components/MiniGraphiQL.jsx
index ce53227..b8b74c6 100644
--- a/components/MiniGraphiQL.jsx
+++ b/components/MiniGraphiQL.jsx
@@ -70,31 +70,15 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
     }
   }
 
-  const containerStyles = {
-    height: '80vh',
-    maxHeight: 'auto',
-    borderRadius: '4px',
-    padding: '0.5rem',
-    display: 'flex',
-    flex: '1 1 0%',
-  };
-
   const graphiqlStyles = `
-    :root {
-      color-scheme: ${theme};
-    }
     .graphiql-container {
+      height: fit-content;
       background-color: transparent !important;
       font-size: 14px;
-    }
-    .graphiql-container * {
-      box-shadow: none !important;
-    }
-    .graphiql-container .graphiql-editor-tools button:nth-child(2) {
-      display: none;
-    }
-    .graphiql-container .graphiql-editors {
-      border-radius: 2px;
+      border-radius: 4px;
+      padding: 0.5rem;
+      display: flex;
+      min-height: 400px; 
     }
     .graphiql-container .graphiql-editors.full-height {
       margin-top: 8px;
@@ -107,25 +91,34 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
     .graphiql-container .graphiql-response .result-window {
       padding-top: 8px;
     }
-    .graphiql-container .graphiql-session-header {
-      display: none;
-    }
     .graphiql-container .graphiql-sessions {
       border-radius: 2px;
     }
+    .graphiql-container .graphiql-editors {
+      border-radius: 2px;
+    }
+    .graphiql-container * {
+      box-shadow: none !important;
+    }
+    .graphiql-container .graphiql-session-header {
+      display: none;
+    }
     .graphiql-container .graphiql-sidebar {
       display: none;
     }
+    .graphiql-container .graphiql-editor-tools button:nth-child(2) {
+      display: none; /* headers tab */
+    }
     .graphiql-toolbar button:nth-child(2) {
-      display: none; /* prettify */
+      display: none; /* prettify button */
     }
     .graphiql-toolbar button:nth-child(3) {
-      display: none; /* merge */
+      display: none; /* merge fragment button */
     }
   `;
 
   return (
-    <div style={containerStyles} className={resolvedTheme}>
+    <div className={resolvedTheme}>
       <style dangerouslySetInnerHTML={{ __html: graphiqlStyles }} />
       {GraphiQL ? (
         <GraphiQL
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 2dfe283..0a65dcc 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -24,11 +24,11 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Header className="my-1 flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
diff --git a/components/ui/tabs.js b/components/ui/tabs.js
index 714ee4e..a14c794 100644
--- a/components/ui/tabs.js
+++ b/components/ui/tabs.js
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-5 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow relative',
       className,
     )}
     {...props}
diff --git a/lib/jsonToPhp.js b/lib/jsonToPhp.js
new file mode 100644
index 0000000..2ec5b6f
--- /dev/null
+++ b/lib/jsonToPhp.js
@@ -0,0 +1,34 @@
+export function jsonToPhp(obj) {
+    const convertArray = (array) => {
+        return array.map(value => {
+            if (typeof value === 'object' && value !== null) {
+                return jsonToPhp(value);
+            } else if (Array.isArray(value)) {
+                return convertArray(value);
+            } else if (typeof value === 'string') {
+                return `'${value.replace(/'/g, "\\'")}'`;
+            } else if (typeof value === 'boolean') {
+                return value ? 'true' : 'false';
+            } else {
+                return value;
+            }
+        }).join(", ");
+    };
+  
+    let result = "array(\n";
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const value = obj[key];
+            result += `\t\t'${key}' => `;
+            if (Array.isArray(value)) {
+                result += convertArray(value) + ",\n";
+            } else if (typeof value === 'object' && value !== null) {
+                result += jsonToPhp(value) + ",\n";
+            } else {
+                result += `${value},\n`;
+            }
+        }
+    }
+    result += "\t)";
+    return result;
+}
diff --git a/lib/snakeToPascalCase.js b/lib/snakeToPascalCase.js
new file mode 100644
index 0000000..419c21c
--- /dev/null
+++ b/lib/snakeToPascalCase.js
@@ -0,0 +1,12 @@
+/**
+ * Converts a snake case string to PascalCase.
+ * 
+ * @param {string} str - The snake case string to convert.
+ * @returns {string} - The PascalCase version of the string.
+ */
+export function snakeToPascalCase(str) {
+    return str
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+}
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index bb36a21..4ce1ec3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,23 @@
 import { withFaust, getWpHostname } from '@faustwp/core';
+import nextMDX from '@next/mdx';
 import withMarkdoc from '@markdoc/next.js'
 import withSearch from './markdoc/search.mjs'
+import rehypePrettyCode from 'rehype-pretty-code';
 
+/** @type {import('rehype-pretty-code').Options} */
+const options = {
+    theme: 'one-dark-pro',
+};
+
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [[rehypePrettyCode, options]],
+  },
+});
+
+/** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
@@ -14,4 +30,4 @@ const nextConfig = {
     },
 };
 
-export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
+export default withFaust( withMDX( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) ) );
diff --git a/package-lock.json b/package-lock.json
index 7842ccb..638e238 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,9 +61,11 @@
         "recma-nextjs-static-props": "^1.0.0",
         "rehype-mdx-title": "^2.0.0",
         "rehype-parse": "^8.0.4",
+        "rehype-pretty-code": "^0.12.0",
         "rehype-stringify": "^9.0.3",
         "remark-gfm": "^3.0.1",
         "shiki": "^0.11.1",
+        "shikiji": "^0.7.6",
         "simple-functional-loader": "^1.2.1",
         "tailwind-merge": "^1.12.0",
         "tailwindcss": "^3.3.1",
@@ -5500,8 +5502,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
@@ -7502,6 +7503,18 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -9408,6 +9421,157 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.1.tgz",
+      "integrity": "sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/@types/hast": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
+      "integrity": "sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/hast-util-from-html/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/hast-util-from-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+      "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^8.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/hastscript": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+      "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/vfile-location": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
+      "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-from-parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.2.tgz",
@@ -14016,6 +14180,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+    },
     "node_modules/parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -14914,6 +15083,160 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-pretty-code": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.0.tgz",
+      "integrity": "sha512-3Gmp/AMazoM2ojDoLmTWSuDdtYJ3Qj39Q6FY3S+w9u1m0CAPLFUqo2GyC96C/3A9z2yW7SoSsUzUJ2RUwuDwZA==",
+      "dependencies": {
+        "@types/hast": "^3.0.3",
+        "hast-util-to-string": "^3.0.0",
+        "parse-numeric-range": "^1.3.0",
+        "rehype-parse": "^9.0.0",
+        "unified": "^11.0.4",
+        "unist-util-visit": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "shikiji": "0.7.x"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/@types/hast": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
+      "integrity": "sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/rehype-pretty-code/node_modules/hast-util-to-string": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
+      "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/rehype-parse": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.0.tgz",
+      "integrity": "sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-stringify": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-9.0.4.tgz",
@@ -15354,6 +15677,396 @@
         "vscode-textmate": "^6.0.0"
       }
     },
+    "node_modules/shikiji": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.7.6.tgz",
+      "integrity": "sha512-KzEtvSGQtBvfwVIB70kOmIfl/5rz1LC8j+tvlHXsJKAIdONNQvG1at7ivUUq3xUctqgO6fsO3AGomUSh0F+wsQ==",
+      "dependencies": {
+        "hast-util-to-html": "^9.0.0"
+      }
+    },
+    "node_modules/shikiji/node_modules/@types/hast": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
+      "integrity": "sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/shikiji/node_modules/@types/mdast": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
+      "integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/shikiji/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/shikiji/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-from-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+      "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^8.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-raw": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.1.tgz",
+      "integrity": "sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-to-html": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.0.tgz",
+      "integrity": "sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-raw": "^9.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/hastscript": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+      "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/shikiji/node_modules/mdast-util-to-hast": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz",
+      "integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/micromark-util-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.0.1.tgz",
+      "integrity": "sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/shikiji/node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/shikiji/node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/shikiji/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/shikiji/node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/shikiji/node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/shikiji/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/vfile-location": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
+      "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/shikiji/node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
diff --git a/package.json b/package.json
index 0f0ac16..918cfd6 100644
--- a/package.json
+++ b/package.json
@@ -67,9 +67,11 @@
     "recma-nextjs-static-props": "^1.0.0",
     "rehype-mdx-title": "^2.0.0",
     "rehype-parse": "^8.0.4",
+    "rehype-pretty-code": "^0.12.0",
     "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.11.1",
+    "shikiji": "^0.7.6",
     "simple-functional-loader": "^1.2.1",
     "tailwind-merge": "^1.12.0",
     "tailwindcss": "^3.3.1",
diff --git a/styles/mini-graphiql-client.module.css b/styles/mini-graphiql-client.module.css
deleted file mode 100644
index 3d3f8ba..0000000
--- a/styles/mini-graphiql-client.module.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.graphiql-container {
-    background-color: transparent !important;
-    font-size: 14px;
-}
-
-.graphiql-container * {
-    box-shadow: none !important;
-}
-
-.graphiql-container .graphiql-editor-tools button:nth-child(2) {
-    display: none;
-}
-
-.graphiql-container .graphiql-editors {
-    border-radius: 2px;
-}
-
-.graphiql-container .graphiql-editors.full-height {
-    margin-top: 8px;
-}
-
-.graphiql-container .graphiql-query-editor {
-    border-bottom: 0;
-    padding: 6px;
-    column-gap: 6px;
-}
-
-.graphiql-container .graphiql-response .result-window {
-    padding-top: 8px;
-}
-
-.graphiql-container .graphiql-session-header {
-    display: none;
-}
-
-.graphiql-container .graphiql-sessions {
-    border-radius: 2px;
-}
-
-.graphiql-container .graphiql-sidebar {
-    display: none;
-}
-
-.graphiql-toolbar button:nth-child(2) {
-    display: none; /* prettify */
-}
-
-.graphiql-toolbar button:nth-child(3) {
-    display: none; /* merge */
-}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 0433230..df0d653 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -89,13 +89,13 @@ module.exports = {
         '8xl': '88rem',
       },
       keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
         },
         'fade-in': {
           from: {
diff --git a/wp-blocks/AcfFieldTypeConfigurationBlock.js b/wp-blocks/AcfFieldTypeConfigurationBlock.js
new file mode 100644
index 0000000..176b29d
--- /dev/null
+++ b/wp-blocks/AcfFieldTypeConfigurationBlock.js
@@ -0,0 +1,138 @@
+import { gql } from '@apollo/client'
+import React from 'react';
+
+import {
+  Card,
+  CardHeader,
+} from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { snakeToPascalCase } from '@/lib/snakeToPascalCase';
+
+const EXAMPLE_KEY = 'example_key'
+
+const tabData = [
+  {
+    key: 'php',
+    name: 'PHP',
+    component: PHPTabContent
+  },
+  {
+    key: 'json',
+    name: 'JSON',
+    component: JSONTabContent
+  },
+];
+
+function PHPTabContent({fieldTypeConfigurationBlockFields}) {
+  const { acfFieldType } = fieldTypeConfigurationBlockFields;
+  const phpGuts = `array(
+      'key'                   => 'group_${EXAMPLE_KEY}',
+      'title'                 => 'My Field Group with ${acfFieldType}',
+      'show_in_graphql'       => 1,
+      'graphql_field_name'    => 'myFieldGroupWith${snakeToPascalCase(acfFieldType)}',
+      'map_graphql_types_from_location_rules' => 0,
+      'graphql_types'         => array( 'Page' ),
+      'fields'                => array(
+        array(
+          'key'                => 'field_${EXAMPLE_KEY}',
+          'label'              => 'My Field',
+          'name'               => 'my_field',
+          'type'               => '${acfFieldType}',
+          'show_in_graphql'    => 1,
+          'graphql_field_name' => 'myField',
+        ),
+      ),
+      'location'              => array(
+        array(
+          array(
+            'param'    => 'post_type',
+            'operator' => '==',
+            'value'    => 'page',
+          ),
+        ),
+      )
+    )`
+  
+  let phpString = `<?php
+add_action( 'acf/include_fields', function() {
+  // Check if the ACF function exists
+  if ( ! function_exists( 'acf_add_local_field_group' ) ) {
+      return;
+  }
+
+  // Add local field group
+  acf_add_local_field_group(
+    ${phpGuts}
+  );
+});
+`;
+
+  return(
+    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
+      {phpString}
+    </pre>
+  )
+}
+
+function JSONTabContent({fieldTypeConfigurationBlockFields}) {
+  const { acfFieldType } = fieldTypeConfigurationBlockFields;
+  
+  const jsonOutput = {
+    key: `group_${EXAMPLE_KEY}`,
+    title: `My Field Group with ${acfFieldType}`,
+    fields: [
+      {
+        key: `field_${EXAMPLE_KEY}`,
+        label: 'My Field',
+        name: 'my_field',
+        type: acfFieldType,
+      }
+    ]
+  };
+
+  const jsonString = JSON.stringify(jsonOutput, null, 2);
+
+  return(
+    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
+      {jsonString}
+    </pre>
+  )
+}
+
+export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFields }) {
+  return (
+    <Card>
+      <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+        <Tabs defaultValue={tabData[0].key}>
+          <TabsList aria-label="Dynamic Tabs">
+            {tabData.map(tab => (
+              <TabsTrigger key={tab.key} value={tab.key}>
+                {tab.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabData.map(tab => (
+            <TabsContent key={tab.key} value={tab.key}>
+              {tab.component({ fieldTypeConfigurationBlockFields })}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </CardHeader>
+    </Card>
+  );
+};
+
+AcfFieldTypeConfigurationBlock.displayName = `AcfFieldTypeConfigurationBlock`
+AcfFieldTypeConfigurationBlock.config = {
+  name: `AcfFieldTypeConfigurationBlock`,
+}
+AcfFieldTypeConfigurationBlock.fragments = {
+  key: `AcfFieldTypeConfigurationBlockFragment`,
+  entry: gql`
+    fragment AcfFieldTypeConfigurationBlockFragment on AcfFieldTypeConfigurationBlock {
+      fieldTypeConfigurationBlockFields {
+        acfFieldType
+      }
+    }
+  `,
+}
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index ae64f95..8dc4fcd 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,64 +1,101 @@
-import { gql } from '@apollo/client'
-import Image from 'next/image'
-import { Fragment } from 'react'
+import { gql } from '@apollo/client';
+import clsx from 'clsx'
+import React, { useState } from 'react';
 
-import { InfoIcon } from '@/components/icons/InfoIcon'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+
+const AccordionItem = ({ title, content, isOpen, onClick }) => {
+  const buttonStyles = {
+    closed:
+      'py-2 px-4 w-full text-left bg-white hover:bg-muted flex justify-between items-center text-black dark:bg-gray-800 dark:text-white',
+    open:
+      'py-2 px-4 w-full text-left bg-muted hover:bg-muted flex justify-between items-center text-black dark:text-white',
+  }
+ 
+  return (
+    <div className="dark:border-dark-gray-300 border-b border-gray-300">
+      <Button onClick={onClick} className={clsx(isOpen ? buttonStyles.open : buttonStyles.closed)}>
+        {title}
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          className="h-4 w-4 transition duration-300" 
+          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} 
+          fill="none" 
+          viewBox="0 0 24 24" 
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </Button>
+      {isOpen && (
+        <div className="dark:bg-dark-muted bg-muted px-4 py-2">
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
-  const { fieldTypeSettings } = fieldTypeSettingsBlockFields
+  const { fieldTypeSettings } = fieldTypeSettingsBlockFields;
+  const [openItems, setOpenItems] = useState([]);
+
+  const toggleItem = (index) => {
+    setOpenItems(current => current.includes(index) 
+      ? current.filter(item => item !== index) 
+      : [...current, index]);
+  };
+
+  const toggleAll = () => {
+    if (openItems.length === fieldTypeSettings.nodes.length) {
+      setOpenItems([]);
+    } else {
+      setOpenItems(fieldTypeSettings.nodes.map((_, index) => index));
+    }
+  };
 
   return (
-    <>
-      {fieldTypeSettings?.nodes?.map((item) => {
-        const { id, name, description, fieldTypeSettingsMeta } = item
-        const { impactOnWpgraphql, adminScreenshot } = fieldTypeSettingsMeta
+    <div>
+      <Card>
+          {fieldTypeSettings?.nodes?.map((item, index) => {
+            const { id, name, description, fieldTypeSettingsMeta } = item;
+            const { impactOnWpgraphql } = fieldTypeSettingsMeta;
 
-        return (
-          <Fragment key={id}>
-            <div className="mb-2">
-              <div className="flex">
-                <h3 className="m-0 inline-flex">{name}</h3>
-                <Popover className="ml-3">
-                  <PopoverTrigger>
-                    <div className="m-2 rounded-full p-2 transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
-                      <InfoIcon />
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent className="min-w-full">
-                    <Image
-                      src={adminScreenshot?.node?.mediaItemUrl}
-                      alt={adminScreenshot?.node?.altText}
-                      width={adminScreenshot?.node?.mediaDetails?.width}
-                      height={adminScreenshot?.node?.mediaDetails?.height}
-                    />
-                    {description && <p className='sr-only'>{description}</p>}
-                  </PopoverContent>
-                </Popover>
-              </div>
-              {impactOnWpgraphql ? (
-                <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
-              ) : (
-                <span className="italic">
-                  Impact on WPGraphQL not yet documented
-                </span>
-              )}
-            </div>
-          </Fragment>
-        )
-      })}
-    </>
-  )
+            return (
+              <AccordionItem
+                key={id}
+                title={name}
+                content={
+                  <>
+                    {description && <p>{description}</p>}
+                    {impactOnWpgraphql && (
+                      <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
+                    )}
+                  </>
+                }
+                isOpen={openItems.includes(index)}
+                onClick={() => toggleItem(index)}
+              />
+            );
+          })}
+      </Card>
+      <div className="mt-4 text-center">
+        <button
+          onClick={toggleAll}
+          className="text-blue-500 underline hover:text-blue-600"
+        >
+          {openItems.length === fieldTypeSettings.nodes.length ? 'Collapse All' : 'Expand All'}
+        </button>
+      </div>
+    </div>
+  );
 }
 
-AcfFieldTypeSettingsBlock.displayName = `AcfFieldTypeSettingsBlock`
+AcfFieldTypeSettingsBlock.displayName = `AcfFieldTypeSettingsBlock`;
 AcfFieldTypeSettingsBlock.config = {
   name: `AcfFieldTypeSettingsBlock`,
-}
+};
 AcfFieldTypeSettingsBlock.fragments = {
   key: `AcfFieldTypeSettingsBlockFragment`,
   entry: gql`
@@ -72,6 +109,7 @@ AcfFieldTypeSettingsBlock.fragments = {
               name
               description
               fieldTypeSettingsMeta {
+                acfFieldName
                 impactOnWpgraphql
                 adminScreenshot {
                   node {
@@ -90,4 +128,6 @@ AcfFieldTypeSettingsBlock.fragments = {
       }
     }
   `,
-}
+};
+
+export default AcfFieldTypeSettingsBlock;
diff --git a/wp-blocks/AcfGraphqlQuery.js b/wp-blocks/AcfGraphqlQuery.js
index d3d7067..4efc631 100644
--- a/wp-blocks/AcfGraphqlQuery.js
+++ b/wp-blocks/AcfGraphqlQuery.js
@@ -9,13 +9,14 @@ const MiniGraphiQL = dynamic(
 );
 
 export function AcfGraphqlQuery({ graphqlQueryBlockMeta }) {
-  const { query, variables } = graphqlQueryBlockMeta;
+  const { query, variables, isReadOnly } = graphqlQueryBlockMeta;
 
   return (
     <MiniGraphiQL
       endpoint={getGraphqlEndpoint()}
       initialQuery={query}
       initialVariables={variables}
+      readOnly={isReadOnly}
     />
   );
 }
@@ -31,6 +32,7 @@ AcfGraphqlQuery.fragments = {
       graphqlQueryBlockMeta {
         query
         variables
+        isReadOnly
       }
     }
   `,
diff --git a/wp-blocks/index.js b/wp-blocks/index.js
index cde7480..359c717 100644
--- a/wp-blocks/index.js
+++ b/wp-blocks/index.js
@@ -1,5 +1,6 @@
 import { CoreBlocks } from '@faustwp/blocks'
 
+import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock'
 import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from './AcfGraphqlQuery'
 import { CoreHeading } from './CoreHeading'
@@ -7,8 +8,9 @@ import { CoreHeading } from './CoreHeading'
 const blocks = {
   ...CoreBlocks,
   CoreHeading,
-  AcfFieldTypeSettingsBlock,
   AcfGraphqlQuery,
+  AcfFieldTypeSettingsBlock,
+  AcfFieldTypeConfigurationBlock,
 }
 
 export default blocks
diff --git a/wp-templates/single-field_type.js b/wp-templates/single-field_type.js
index b930c65..55ba9c8 100644
--- a/wp-templates/single-field_type.js
+++ b/wp-templates/single-field_type.js
@@ -7,6 +7,7 @@ import Head from 'next/head'
 import { Layout } from '@/components/Layout'
 import { Badge } from '@/components/ui/badge'
 import blocks from '@/wp-blocks'
+import { AcfFieldTypeConfigurationBlock } from '@/wp-blocks/AcfFieldTypeConfigurationBlock'
 import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from '@/wp-blocks/AcfGraphqlQuery'
 
@@ -116,8 +117,9 @@ query SingleAcfFieldType($uri: String!) {
                 ...${blocks.CoreSeparator.fragments.key}
                 ...${blocks.CoreList.fragments.key}
                 ...${blocks.CoreHeading.fragments.key}
-                ...AcfFieldTypeSettingsBlockFragment
-                ...AcfGraphqlQueryFragment
+                ...${AcfFieldTypeSettingsBlock.fragments.key}
+                ...${AcfFieldTypeConfigurationBlock.fragments.key}
+                ...${AcfGraphqlQuery.fragments.key}
             }
         }
         ...aCFFieldTypeCategoriesFragment
@@ -126,6 +128,7 @@ query SingleAcfFieldType($uri: String!) {
 ${Layout.fragment}
 ${aCFFieldTypeCategoriesFragment}
 ${AcfFieldTypeSettingsBlock.fragments.entry}
+${AcfFieldTypeConfigurationBlock.fragments.entry}
 ${AcfGraphqlQuery.fragments.entry}
 
 ${blocks.CoreParagraph.fragments.entry}