Handling nested code block (triple backtick inside codeblock)

[rizqyhbb]

Information

1. version: 7.2.0
2. I'm also using react-syntax-highlighter
3. Framework: remix

I'm facing issue where i have code block like this:

const text = 'this is just an example\n```javascript\nconsole.log(`hello`)\n```'

as you can see that github mark down make it good code block, but with markdown-to-jsx this is what i get

[espressom]

const CodeBlock = ({ children }: { children: React.ReactElement }) => {
  const { className, children: code } = children.props;

  const language = className?.replace("lang-", "");
  return (
    <SyntaxHighlighter language={language}>
      {code}
    </SyntaxHighlighter>
  );
};

import Markdown from "markdown-to-jsx";

<Markdown
    options={{
        forceBlock: true,
        overrides: { pre: { component: CodeBlock } }
    }}>
     {content}
</Markdown>

In this way, code blocks will be rendered properly. (It works for my project)

[rizqyhbb]

const CodeBlock = ({ children }: { children: React.ReactElement }) => {
  const { className, children: code } = children.props;

  const language = className?.replace("lang-", "");
  return (
    <SyntaxHighlighter language={language}>
      {code}
    </SyntaxHighlighter>
  );
};

import Markdown from "markdown-to-jsx";

<Markdown
    options={{
        forceBlock: true,
        overrides: { pre: { component: CodeBlock } }
    }}>
     {content}
</Markdown>

In this way, code blocks will be rendered properly. (It works for my project)

Thanks for your response, It still not give me a good result. Can you make sure that your code block is triple backtick (i.e ```javascript) not quad (i.e ````javascript).

I know that four backticks will solve the problem, somehow I don't have control to the response that I get from OpenAI