Design the <code> element of the markdown in react

Question

I am trying to design the code block inside the markdown previewer. I want to design all the code blocks that is written inside the editor. I've tried many methods but couldn't do it.

The current situation is this:

I want it to be like this:

This is the link of the code

Answer 1

you can use this https://www.npmjs.com/package/react-code-blocks

import { CopyBlock } from "react-code-blocks";
function MyCodeComponent(props) {
  return (
    <CopyBlock
      text={props.code}
      language={props.language}
      showLineNumbers={props.showLineNumbers}
      wrapLines
    />
  );
}