Fix markdown highlighting

Frontend/docs/home.mdx

@@ -5,4 +5,4 @@ summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset nece
 ---
 
 # bob
-HELLO JOHN
+HELLO **JOHN**

Frontend/package.json

@@ -38,6 +38,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "remark-gfm": "^4.0.0",
+    "remote-mdx": "^0.0.4",
     "restfulmc-lib": "^1.1.3",
     "shadcn-ui": "0.8.0",
     "sharp": "^0.33.3",

Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -11,6 +11,7 @@ import {
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { capitalize } from "@/lib/stringUtils";
+import { CustomMDX } from "@/mdx-components";
 
 /**
  * The page to display content
@@ -59,6 +60,9 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
                     )}
                 </BreadcrumbList>
             </Breadcrumb>
+
+            {/* Content */}
+            <CustomMDX source={content.content} />
         </main>
     );
 };

Frontend/src/app/(pages)/docs/layout.tsx

@@ -12,7 +12,7 @@ const DocumentationLayout = ({
 }: Readonly<{
     children: ReactNode;
 }>): ReactElement => (
-    <section className="h-screen flex justify-center items-center">
+    <section className="h-screen pt-64 flex justify-center">
         <div className="flex gap-10">
             <Sidebar />
             {children}

Frontend/src/mdx-components.tsx

@@ -1,10 +1,20 @@
-import type { MDXComponents } from "mdx/types";
+import { ReactElement, ReactNode } from "react";
+import { MDXRemote } from "remote-mdx/rsc";
 
-export const useMDXComponents = (components: MDXComponents): MDXComponents => {
+const components: any = {
-    return {
+    h1: ({ children }: { children: ReactNode }) => (
-        h1: ({ children }) => (
+        <h1 className="text-3xl">{children}</h1>
-            <h1 className="text-6xl font-semibold">{children}</h1>
+    ),
-        ),
+};
-        ...components,
+
-    };
+export const CustomMDX = (props: any): ReactElement => {
+    return (
+        <MDXRemote
+            {...props}
+            components={{
+                ...components,
+                ...(props.components || {}),
+            }}
+        />
+    );
 };

Frontend/tailwind.config.ts

@@ -4,7 +4,7 @@ const { screens } = require("tailwindcss/defaultTheme");
 
 const config = {
     darkMode: ["class"],
-    content: ["./src/app/**/*.{ts,tsx,mdx}"],
+    content: ["./src/app/**/*.{ts,tsx}"],
     theme: {
         container: {
             center: true,