How can I handle styling of returned chunks in real time while streaming? as codeblock, inline code and ect

API
, , ,
1

Hi, I have problem to style openai GPT api like it is in ChatGPT, which returned chunks in real time on my next js project, so i tryed to pass chunks to SyntaxHighlighter but because response of AI is returned as small chunks I did not manage to style it properly, for example codeBlock, inline code and ect
here is small example of AI response tich backticks and other characters:

  1. ** Create a Project Directory:** If you haven’t already set up a project directory, create a new directory for your Node.js Express project. You can do this using the following command: bash mkdir odd-number-finder cd odd-number-finder 2. ** Initialize a Node.js Project:** Initialize a new Node.js project in your project directory by running:```bash npm init -y````

How can I handle this situation? because just passing chunks to SyntaxHighlighter is not gonna work.

const MarkdownRenderer = ({ content }) => {
  const CodeBlock = ({ className, children }) => {
    const language = className?.replace("language-", "") || "";
    const code = String(children);
    return (
      <SyntaxHighlighter language={language} style={atomDark}>
        {code}
      </SyntaxHighlighter>
    );
  };

  return (
    <div className="markdown prose w-full break-words">
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex, rehypeHighlight]}
        components={{
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
              return <code className={className}>{children}</code>;
            }
            return <CodeBlock className={className}>{children}</CodeBlock>;
          },
          p: ({ children }) => (
            <p className="whitespace-pre-wrap">{children}</p>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
};

thanks