fix codeblocks

package.json

@@ -13,7 +13,6 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "highlight.js": "^11.9.0",
     "lang-detector": "^1.0.6",
     "lucide-react": "^0.372.0",
     "moment": "^2.30.1",

pnpm-lock.yaml

@@ -17,9 +17,6 @@ dependencies:
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
-  highlight.js:
-    specifier: ^11.9.0
-    version: 11.9.0
   lang-detector:
     specifier: ^1.0.6
     version: 1.0.6
@@ -1592,11 +1589,6 @@ packages:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
     dev: false
 
-  /highlight.js@11.9.0:
-    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
-    engines: {node: '>=12.0.0'}
-    dev: false
-
   /ignore@5.3.1:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}

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;