MDXProvider

components/PostLayout.js

@@ -1,24 +1,48 @@
 import { Grid, Container, Typography, Paper } from "@mui/material";
+import { MDXProvider } from "@mdx-js/react";
+import Image from "next/image";
+
+const components = {
+  h1: (props) => <Typography variant="h1" {...props} />,
+  h2: (props) => <Typography variant="h2" {...props} />,
+  h3: (props) => <Typography variant="h3" {...props} />,
+  h4: (props) => <Typography variant="h4" {...props} />,
+  h5: (props) => <Typography variant="h5" {...props} />,
+  h6: (props) => <Typography variant="h6" {...props} />,
+  img: (props) => <Image alt={props.alt} layout="responsive" {...props} />,
+  code: (props) => (
+    <code
+      style={{
+        backgroundColor: "lightpink",
+        borderRadius: "0.4rem",
+        padding: "0.2rem",
+      }}
+      {...props}
+    />
+  ),
+};
 
 export default function PostLayout({ children, meta }) {
   return (
-    <Container>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Paper
-            style={{
-              padding: "1rem",
-              margin: "1rem",
-              backgroundColor: "#fafafa",
-            }}
-          >
-            <Typography variant="h4">{meta.title}</Typography>
-            <Typography variant="body1">{meta.description}</Typography>
-            <hr />
-            {children}
-          </Paper>
+    <MDXProvider components={components}>
+      <Container>
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Paper
+              style={{
+                padding: "1rem",
+                margin: "1rem",
+                backgroundColor: "#fafafa",
+              }}
+            >
+              <Typography variant="h4">{meta.title}</Typography>
+              <Typography variant="body1">{meta.description}</Typography>
+              <hr />
+              {children}
+            </Paper>
+          </Grid>
         </Grid>
-      </Grid>
-    </Container>
+      </Container>
+    </MDXProvider>
   );
 }