From cad60cf21fdb0e8c47050f6cfd6e35451d97647d Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Mon, 23 Aug 2021 10:48:06 -0400
Subject: [PATCH] Use custom button and pre in markdown

---
 components/Pre.module.css | 6 ++++++
 components/Pre.tsx        | 9 +++++++++
 pages/_app.tsx            | 4 +++-
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 components/Pre.module.css
 create mode 100644 components/Pre.tsx

diff --git a/components/Pre.module.css b/components/Pre.module.css
new file mode 100644
index 00000000..b3e7a635
--- /dev/null
+++ b/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);
+}
diff --git a/components/Pre.tsx b/components/Pre.tsx
new file mode 100644
index 00000000..1068d1cf
--- /dev/null
+++ b/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(" ")} />;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4fc6e4fe..54e9af09 100644
--- a/pages/_app.tsx
+++ b/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 */}