add code support in markdown

Author: Boltzmachine

mdx-components.tsx

@@ -1,6 +1,7 @@
+import clsx from "clsx";
+import { fontMono } from "@/config/fonts";
 import type { MDXComponents } from 'mdx/types'
 import Image, { ImageProps } from 'next/image'
-
 interface ImageOption {
     scale: number
 }
@@ -46,6 +47,18 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
             />
         ),
         p: ({ children }) => <p>{children}</p>,
+        code: ({ children }) => <code className={clsx('font-mono p-4 block', fontMono.variable)}>{children}</code>,
+        pre: ({ children, ...props }) => (
+            <pre
+                className={clsx(
+                    'rounded-md shadow-lg overflow-auto',
+                    props.className // Preserve any existing className
+                )}
+                {...props}
+            >
+                {children}
+            </pre>
+        ),
         ...components,
     }
 }

next.config.mjs

@@ -1,9 +1,11 @@
 import createMDX from '@next/mdx'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
+import rehypeStringify from "rehype-stringify";
 import remarkMdxImages from 'remark-mdx-images'
 import remarkGfm from 'remark-gfm'
 import rehypeUnwrapImages from 'rehype-unwrap-images'
+import rehypePrettyCode from "rehype-pretty-code";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -24,11 +26,18 @@ const nextConfig = {
 
 }
 
+/** @type {import('rehype-pretty-code').Options} */
+const code_options = {
+    theme: "github-dark-dimmed",
+    keepBackground: true
+};
+
+
 const withMDX = createMDX({
     // Add markdown plugins here, as desired
     options: {
         remarkPlugins: [remarkGfm, remarkMath, remarkMdxImages],
-        rehypePlugins: [rehypeKatex, rehypeUnwrapImages],
+        rehypePlugins: [rehypeKatex, [rehypePrettyCode, code_options]],
     },
 })
 export default withMDX(nextConfig)

package-lock.json

@@ -41,11 +41,14 @@
 		"react-icons": "^5.3.0",
 		"rehype-katex": "^7.0.1",
 		"rehype-mdx-import-media": "^1.2.0",
+		"rehype-pretty-code": "^0.14.0",
+		"rehype-stringify": "^10.0.1",
 		"rehype-unwrap-images": "^1.0.0",
 		"remark-gfm": "^4.0.0",
 		"remark-math": "^6.0.0",
 		"remark-mdx-images": "^3.0.0",
-		"sharp": "^0.33.5"
+		"sharp": "^0.33.5",
+		"shiki": "^1.24.4"
 	},
 	"devDependencies": {
 		"@types/node": "20.5.7",