Add code syntax highlighting

Frontend/docs/home.md

@@ -31,6 +31,21 @@ summary: 'Get started with RESTfulMC! duis numquam himenaeos lectus quisque assu
 # Heading level 1
 I really like using Markdown.
 
+```
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+/**
+ * The provider of themes!!
+ */
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => (
+    <NextThemesProvider {...props}>{children}</NextThemesProvider>
+);
+export default ThemeProvider;
+```
+
 ```typescript
 "use client";
 

Frontend/package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@types/mdx": "^2.0.13",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "class-variance-authority": "^0.7.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
@@ -47,6 +48,7 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
+    "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "remote-mdx": "^0.0.4",
     "restfulmc-lib": "^1.1.3",

Frontend/src/app/components/mdx.tsx

@@ -10,6 +10,14 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import {
+    atomOneDark,
+    nord,
+    ocean,
+    solarizedDark,
+    stackoverflowDark,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 /**
  * The MDX components to style.
@@ -62,6 +70,28 @@ const components: any = {
     p: ({ children }: { children: ReactNode }): ReactElement => (
         <p className="leading-4 text-zinc-300/80">{children}</p>
     ),
+    code: ({
+        className,
+        children,
+    }: {
+        className: string;
+        children: any;
+    }): ReactElement => {
+        return className ? (
+            <SyntaxHighlighter
+                className="max-w-5xl !bg-muted break-all rounded-lg"
+                language={className.replace("language-", "")}
+                style={atomOneDark}
+                wrapLongLines
+            >
+                {children}
+            </SyntaxHighlighter>
+        ) : (
+            <code className="p-2 max-w-5xl block bg-muted rounded-lg">
+                {children}
+            </code>
+        );
+    },
     ul: ({ children }: { children: ReactNode }): ReactElement => (
         <ul className="px-3 list-disc list-inside">{children}</ul>
     ),