Well, the official GitHub documentation says they used third party for language detection and code hilights.

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

"We use Linguist to perform language detection and to select third-party grammars for syntax highlighting. You can find out which keywords are valid in the languages YAML file."

You may try to do the same thing.

Actually, I wonder how this page, StackOverflow may do it, since the code you paste here, is well highligted.

You may think in how to install the third party libraries and use it in your own project. My recommendation would be to:

The most common and effective way to render Markdown with syntax highlighting (including for JSX) in a React application is to combine the react-markdown library with react-syntax-highlighter.

You're correct that Markdown itself doesn't highlight code; it just identifies code blocks. You may need to use a separate library to parse and style that code. react-syntax-highlighter is a popular choice because it bundles highlighting libraries like Prism and Highlight.js for easy use in React.

An useful example might be:

Step 1: Install Dependencies

First, you need to install the necessary packages:

npm install react-markdown react-syntax-highlighter
# Optional, but recommended for GitHub-style markdown (tables, etc.)
npm install remark-gfm

Step 2: Create the Component

Now, create a component that renders the Markdown. The key is to use the components prop in react-markdown to override the default renderer for code blocks.

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// You can choose any theme you like
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';

// The markdown string you want to render
const markdownString = `
Here's some regular text.

And here is a JSX code block:

\`\`\`jsx
import React from 'react';

function MyComponent() {
  return (
    <div className="container">
      <h1>Hello, React!</h1>
    </div>
  );
}
\`\`\`

We also support inline \`code\` elements.

And other languages like JavaScript:

\`\`\`javascript
console.log('Hello, world!');
\`\`\`
`;

function MarkdownRenderer() {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]} // Adds GFM support
      children={markdownString}
      components={{
        code(props) {
          const { children, className, node, ...rest } = props;
          const match = /language-(\w+)/.exec(className || '');
          return match ? (
            <SyntaxHighlighter
              {...rest}
              PreTag="div"
              children={String(children).replace(/\n$/, '')}
              language={match[1]} // e.g., 'jsx', 'javascript'
              style={vscDarkPlus}  // The theme to use
            />
          ) : (
            <code {...rest} className={className}>
              {children}
            </code>
          );
        },
      }}
    />
  );
}

export default MarkdownRenderer;