fix codeblocks

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>
+  );
+}