feat(codeblocks): codeblocks now have proper theming with highlighting

frontend/src/components/MdProcessor.tsx

@@ -9,6 +9,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
+import highlighter from "../utils/highlighter";
 
 const toRawUrl = (repoUrl: string): string => {
     if (!repoUrl) return repoUrl;
@@ -136,10 +137,7 @@ export default function MdProcessor({
 
                                 if (isBlock) {
                                     return (
-                                        <code
-                                            className={`${className || ""} text-sm block overflow-x-auto`}
-                                            {...props}
-                                        >
+                                        <code className="text-sm" {...props}>
                                             {children}
                                         </code>
                                     );
@@ -157,13 +155,67 @@ export default function MdProcessor({
 
                             pre({
                                 children,
-                                ...props
                             }: ComponentPropsWithoutRef<"pre">): ReactElement {
+                                const codeChild = Array.isArray(children)
+                                    ? children[0]
+                                    : children;
+
+                                let lang = "";
+                                let code = "";
+
+                                if (
+                                    codeChild &&
+                                    typeof codeChild === "object" &&
+                                    "props" in codeChild
+                                ) {
+                                    const el = codeChild as {
+                                        props: {
+                                            className?: string;
+                                            children?: string;
+                                        };
+                                    };
+                                    const cls = el.props?.className;
+                                    const match = cls?.match(/language-(\w+)/);
+                                    if (match) lang = match[1];
+                                    if (
+                                        typeof el.props?.children === "string"
+                                    ) {
+                                        code = el.props.children;
+                                    }
+                                }
+
+                                const highlighted =
+                                    lang && code
+                                        ? highlighter.codeToHtml(code, {
+                                              lang,
+                                              themes: {
+                                                  dark: "catppuccin-macchiato",
+                                                  light: "catppuccin-latte",
+                                              },
+                                              defaultColor: false,
+                                          })
+                                        : null;
+
+                                if (highlighted) {
+                                    return (
+                                        <div className="relative border-2 border-ctp-text/50 rounded-md overflow-hidden my-6 bg-ctp-base">
+                                            {lang && (
+                                                <span className="absolute top-0 left-0 px-2 py-1 text-xs font-mono text-ctp-mauve">
+                                                    {lang}
+                                                </span>
+                                            )}
+                                            <div
+                                                className={`overflow-x-auto text-sm p-4 ${lang ? "pt-7" : ""}`}
+                                                dangerouslySetInnerHTML={{
+                                                    __html: highlighted,
+                                                }}
+                                            />
+                                        </div>
+                                    );
+                                }
+
                                 return (
-                                    <pre
-                                        className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
-                                        {...props}
-                                    >
+                                    <pre className="overflow-x-auto text-sm p-4 bg-ctp-mantle m-0 border-2 border-ctp-lavender/60 rounded-md my-6">
                                         {children}
                                     </pre>
                                 );