Colors work on inline code lets go

src/components/prism/mdx-provider.js

@@ -0,0 +1,32 @@
+"use client"
+
+// mdx-provider.js
+import { MDXProvider } from '@mdx-js/react';
+import Prism from './prism-setup';
+import { useEffect } from 'react';
+
+const CodeBlock = ({ children, className }) => {
+  const language = className?.replace(/language-/, '') || '';
+
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
+  return (
+    <pre className={className}>
+      <code className={className}>{children}</code>
+    </pre>
+  );
+};
+
+const components = {
+  pre: CodeBlock,
+  code: CodeBlock,
+};
+
+const MdxProvider = ({ children }) => {
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+};
+
+export default MdxProvider;
+

src/components/prism/prism-setup.js

@@ -0,0 +1,10 @@
+// prism-setup.js
+import Prism from 'prismjs';
+import 'prismjs/components/prism-python'; // Add more languages as needed
+
+// Add more languages as needed, e.g.:
+// import 'prismjs/components/prism-python';
+// import 'prismjs/components/prism-java';
+
+export default Prism;
+