src/components/CodeBlock.jsx

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

export default function CodeBlock({ code }) {
  return (
    <SyntaxHighlighter
      language="javascript" // fallback default
      style={oneDark}
      showLineNumbers
      wrapLines
      customStyle={{
        fontSize: "0.9rem",
        borderRadius: "8px",
        padding: "1em",
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
}