我想出来了！我将react-syntax-highlighter与react-markdown结合使用。我从this blog得到了一些代码片段，其中包含如何解析代码片段并通过语法高亮器传递。
Here's my repo，如果你想看看我的解决方案。
我使用marked将我的markdown转换为HTML字符串，这阻止了高亮显示的发生。一旦我将我的markdown内容从标记的依赖项中取出，并将gray-matter.content传递给我的ReactMarkdown，它就完美地工作了。
......好吧，也许不是很完美......
当我尝试使用颜色主题时，发生了一些奇怪的事情。我最终把我想要的主题从节点模块中拉出来，把它放在我的根目录中，从那里调用它，它非常好。有一点hacky，但它的工作！

下面是我如何在Next.js https://thetombomb.com/posts/adding-code-snippets-to-static-markdown-in-Next%20js中使用语法突出显示
我最初使用的是greymatter，因为我是在Next.js starter应用项目之后构建的。我不得不转移到使用react-markdown和react-syntax-highlighter来让一切正常工作。

正如您在回答中提到的，您正在使用react-markdown，您不需要react-syntax-highlighter。
它是一个基于prismjs构建的包，那么为什么不直接使用prismjs呢？
这个博客syntax-highlighting-next-js包含演练。
如果不考虑特殊的用例（如您的用例），使用父包总是比使用 Package 器包更好。

import ReactMarkdown from "react-markdown";
    import { Content } from "mdast";
    // import light build
    import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
    // import only whatever languages you are using. Thaw will dramatically reduce the build size of the page
    import js from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
    import python from "react-syntax-highlighter/dist/cjs/languages/prism/python";
    // those tags are used when you write ```js  {code here} ```
    SyntaxHighlighter.registerLanguage("js", js);
    SyntaxHighlighter.registerLanguage("py", python);

定义自定义渲染器：

const customRenderers= {
    // modify the code tag 
    code(code) {
    // node since i use ts, this code here might vary in your app
      const { node } = code;
      const { lang, value } = node;
      return (
        <div style={{ fontSize: "1.6rem" }}>
          <SyntaxHighlighter
            style={vscDarkPlus}
            language={lang}
            children={value}
          />
        </div>
      );
    },
  };

然后返回该组件

return (
             <article style={{ paddingLeft: "2rem" }}>
                <ReactMarkdown  renderers={customRenderers}>
                  // place whatever you want to render
                  {blog.content} 
                </ReactMarkdown>
              </article>
    )

如果你正在使用Markdown，那么你可以转向MDX（Markdown扩展），这样你就可以启用插件，比如rehype-highlight插件，它与highlight.js相同。
启用此功能后，您可以导入它并将其添加到MDX选项中，然后您需要做的就是选择highlight.js style并将其导入到页面中：
1.安装rehype-highlight：npm install rehype-highlight
1.添加到您的mdx选项：

import rehypeHighlight from 'rehype-highlight';

const options = {
    mdxOptions: {
        remarkPlugins: [],
        rehypePlugins: [rehypeHighlight],
    }
}

1.下载一个highlight.js style到/styles/highlight-js/并将其导入到您的页面：

import "@/styles/highlight-js/github-dark.css"

完整的说明可以在这里找到：https://gaudion.dev/blog/mdx-syntax-highlighting