Colors work on inline code lets go

src/app/blog/[slug]/page.jsx

@@ -1,4 +1,6 @@
+// [slug]/page.jsx
 import { getBlogBySlug, getAllBlogSlugs } from "@/lib/mdx";
+import MdxProvider from "@/components/prism/mdx-provider";
 
 export async function generateStaticParams() {
   const slugs = await getAllBlogSlugs();
@@ -9,14 +11,18 @@ export async function generateStaticParams() {
 
 export default async function BlogPage({ params }) {
   const blog = await getBlogBySlug(params.slug);
+
   return (
-    <section className="py-16 prose">
+    <section className="py-16 prose mx-auto">
       <article>
         <h1 className="text-light-foreground dark:text-dark-foreground">{blog.frontmatter.title}</h1>
         <p className="text-light-yellow-1 dark:text-dark-yellow-1">{blog.frontmatter.author}</p>
         <p className="text-light-blue-1 dark:text-dark-blue-1">{blog.frontmatter.date}</p>
-        <div>{blog.content}</div>
+        <MdxProvider>
+          <div>{blog.content}</div>
+        </MdxProvider>
       </article>
     </section>
   );
 }
+

src/app/blog/posts/corebooting-my-thinkpad.mdx

@@ -6,6 +6,12 @@ description: "This is a sample MDX file."
 tags: ["coreboot", "t440p", "dgpu"]
 ---
 
+
+```python
+import random
+print(random.randint(1, 100))
+```
+
 # Heading 1
 
 ## Heading 2