Use custom button and pre in markdown

components/Pre.module.css

@@ -0,0 +1,6 @@
+.pre {
+  padding: calc(10rem / 16);
+  background: var(--input-background);
+  overflow-x: auto;
+  border-radius: calc(5rem / 16);
+}

components/Pre.tsx

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from "react";
+
+import styles from "./Pre.module.css";
+
+export function Pre(props: HTMLAttributes<HTMLPreElement>) {
+  const classes = [styles.pre, props.className ?? ""];
+
+  return <pre {...props} className={classes.join(" ")} />;
+}

pages/_app.tsx

@@ -3,10 +3,12 @@ import { NextComponentType, NextPageContext } from "next";
 import { AppProps as DefaultAppProps } from "next/app";
 import React, { ComponentType, ReactNode } from "react";
 
+import { Button } from "@/components/Button";
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
+import { Pre } from "@/components/Pre";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -19,7 +21,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 
   return (
     <ThemeProvider>
-      <MDXProvider components={{ a: Link }}>
+      <MDXProvider components={{ a: Link, button: Button, pre: Pre }}>
         <div className={styles.appContainer}>
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}