.babelrc

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
  "plugins": [
    [
      "prismjs",
      {
        "languages": [
          "javascript",
          "css",
          "markup",
          "swift",
          "typescript",
          "graphql",
          "sql",
          "bash",
          "json",
          "jsx",
          "tsx"
        ],
        "plugins": ["line-numbers", "show-language"],
        "css": false
      }
    ]
  ]
}

markdown.tsx

import React, { Fragment, useEffect, useRef } from "react";
import unified from "unified";
import markdown from "remark-parse";
import slug from "remark-slug";
// import toc from "remark-toc";
import remark2rehype from "remark-rehype";
import highlightCode from "rehype-prism";
import rehype2react from "rehype-react";
import Prism from "prismjs";

const processor = unified()
  .use(markdown)
  .use(slug)
  .use(remark2rehype)
  .use(highlightCode)
  .use(rehype2react, {
    createElement: React.createElement,
    Fragment: Fragment,
    components: {
      pre: (props) => {
        return <pre {...props} className={`${props.className} line-numbers`} />;
      },
    },
  });

interface Props {
  source: string;
}

const Markdown: React.FC<Props> = ({ source }) => {
  const ref = useRef();
  useEffect(() => {
    Prism.highlightAllUnder(ref.current);
  }, []);

  //@ts-ignore
  return <div ref={ref}>{processor.processSync(source).result}</div>;
};

export default Markdown;