Markdown with React

react-markdown.js

import ReactMarkdown from "react-markdown";
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import Styled from "styled-components";

const Code = Styled.code`
    color: red;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    background-color: #EDEDEB;
    border-radius: 3px;
`;

const CodeBlock = Styled.div`
    width: 80%;
    font-size: 0.8rem;
`;

const MarkdownBody = Styled.div`
    width: 60%;
    margin: 0 auto;
`;

function MarkDown() {
  const text = `# Learn Python
## Python is a programming language
### Python is easy to learn
#### Python is used for many purposes
##### Python is used for web development
###### Python is used for data science

You can use \`print\` function to print a message to the screen.

\`\`\`python
text = "Hello World"
print(text)
\`\`\`
`;
  const customRenderers = {
    code: (code) => {
      const { className, children } = code;
      const language = className ? className.split("-")[1] : "";

      if (language) {
        return (
          <CodeBlock>
            <SyntaxHighlighter style={oneDark} language={language}>
              {children}
            </SyntaxHighlighter>
          </CodeBlock>
        );
      } else {
        return <Code>{children}</Code>;
      }
    },
  };

  return (
    <MarkdownBody>
      <ReactMarkdown components={customRenderers}>{text}</ReactMarkdown>
    </MarkdownBody>
  );
}

export default MarkDown;