Frontend/src/app/components/code-block.tsx

import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { jetbrainsMono } from "@/app/common/font/font";

type CodeBlockProps = {
  /**
   * The code to highlight.
   */
  code: string;

  /**
   * The language of the code.
   */
  language: string;
};

export function CodeBlock({ code, language }: CodeBlockProps): ReactElement {
  return (
    <SyntaxHighlighter
      className="!bg-transparent text-xs"
      style={atomOneDark}
      language={language == "text" ? "plaintext" : language}
      showLineNumbers
      codeTagProps={{
        style: {
          fontFamily: jetbrainsMono.style.fontFamily,
          fontWeight: jetbrainsMono.style.fontWeight,
          fontStyle: jetbrainsMono.style.fontStyle,
        },
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
}