fix codeblocks

src/app/(pages)/[id]/page.tsx

@@ -3,10 +3,7 @@ import { ActionMenu } from "@/app/components/action-menu";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
-
-// Highlight.js theme
-import "highlight.js/styles/github-dark-dimmed.css";
-import Codeblock from "@/app/components/codeblock";
+import { CodeBlock } from "@/app/components/codeBlock";
 
 type PasteProps = {
   params: {
@@ -65,7 +62,7 @@ export default async function Paste({
       <ActionMenu />
 
       <div className="p-1 hljs !bg-transparent text-sm">
-        <Codeblock>{data.content}</Codeblock>
+        <CodeBlock code={data.content} />
       </div>
     </div>
   );

src/app/components/codeBlock.tsx

@@ -0,0 +1,33 @@
+import { ReactElement } from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { cn } from "@/app/common/utils";
+import { jetbrainsMono } from "@/app/common/font/font";
+
+type CodeBlockProps = {
+  /**
+   * The code to highlight.
+   */
+  code: string;
+};
+
+export function CodeBlock({ code }: CodeBlockProps): ReactElement {
+  return (
+    <SyntaxHighlighter
+      className="break-all !bg-transparent text-xs"
+      style={atomOneDark}
+      wrapLongLines
+      showLineNumbers
+      PreTag={"div"}
+      codeTagProps={{
+        style: {
+          fontFamily: jetbrainsMono.style.fontFamily,
+          fontWeight: jetbrainsMono.style.fontWeight,
+          fontStyle: jetbrainsMono.style.fontStyle,
+        },
+      }}
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+}

src/app/components/codeblock.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import hljs from "highlight.js";
-import { useEffect, useState } from "react";
-
-const Codeblock = ({ children }: { children: string }) => {
-  const [mounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    if (mounted) {
-      hljs.safeMode();
-      hljs.highlightAll();
-    }
-  }, [mounted, children]);
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      setIsMounted(true);
-    }
-  }, []);
-
-  if (!mounted) {
-    return;
-  }
-
-  return (
-    <pre>
-      <code className="!bg-transparent">{children}</code>
-    </pre>
-  );
-};
-
-export default Codeblock;