react实现markdown展示和语法高亮

import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";


function Contents(props) {
let replacedText ="""对于包含代码块的字符串,可以使用以下方法将代码块展示出来:
```python
for code in code_blocks:
    print(code)
```
这是字符串文本, react怎么实现对代码语法高亮"""
return (
<ReactMarkdown
children={replacedText}
components={{
  code({ node, inline, className, children, ...props }) {
    const match = /language-(\w+)/.exec(className || "");
    return !inline && match ? (
      <SyntaxHighlighter
        children={String(children).replace(/\n$/, "")}
        style={dark}
        language={match[1]}
        PreTag="div"
        {...props}
      />
    ) : (
      <code className={className} {...props}>
        {children}
      </code>
    );
  },
}}
></ReactMarkdown>
)
}