added code theming

package.json

@@ -8,13 +8,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/remark-prism": "^1.3.0",
     "clsx": "^1.1.1",
     "gray-matter": "^4.0.3",
     "next": "12.0.7",
     "next-mdx-remote": "^3.0.8",
+    "prism-theme-night-owl": "^1.4.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rehype-img-size": "^0.0.1"
+    "rehype-img-size": "^0.0.1",
+    "remark-prism": "^1.3.6"
   },
   "devDependencies": {
     "@types/node": "16.11.11",

pages/_app.tsx

@@ -1,8 +1,9 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import '../styles/globals.css';
+import 'prism-theme-night-owl';
+import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

util/processMdx.ts

@@ -1,14 +1,18 @@
 import { serialize } from 'next-mdx-remote/serialize';
 import imageSize from 'rehype-img-size';
-import { dirname } from 'path';
+import prism from 'remark-prism';
 
 async function processMdx(source: string, file: string) {
-  console.log('FILE', file);
-
   return await serialize(source, {
     mdxOptions: {
       filepath: file,
       rehypePlugins: [[imageSize, { dir: 'public' }]],
+      remarkPlugins: [
+        [
+          prism,
+          { theme: 'Night Owl', extensions: ['night-owl', 'vscode-toml'] },
+        ],
+      ],
     },
   });
 }