MarkDown渲染（react-markdown）+代码高亮（react-syntax-highlighter）

需求有渲染MD，代码高亮

依赖的库有：

• MD渲染：react-markdown 、
• 代码高亮： react-syntax-highlighter｜prismjs
• 两个与 Markdown 处理和渲染有关的插件（按需）：remark-gfm、rehype-color-chips。

要在React项目中使用react-markdown配合remark-gfm和rehype-color-chips插件，您可以按照以下步骤进行操作：

1. 首先，确保您已经在项目中安装了react-markdown，remark-gfm和rehype-color-chips。您可以使用npm或yarn来安装它们：

npm install react-markdown remark-gfm rehype-color-chips react-syntax-highlighter

1. 导入所需的模块和组件：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { remarkGfm } from 'remark-gfm';
import { rehypeColorChips } from 'rehype-color-chips';

1. 创建一个React组件，该组件将用于渲染Markdown内容：

function MarkdownRenderer({ markdown }) {
  return (
    <ReactMarkdown
  		remarkPlugins={[remarkGfm]}
  		rehypePlugins={[rehypeColorChips]}
                components={{
                        code({node, inline, className, children, ...props}) {
                            const match = /language-(\w+)/.exec(className || '');
                            return !inline && match ? (
                                <>
                                    <div className={style.tool}>
                                        <div className="lang">{match[1]}</div>
                                        <div
                                            style={{cursor: 'pointer'}}
                                            className="copy"
                                            onClick={() => {
                                                copyText(children, '', '');
                                            }}
                                        >
                                            <CopySvg /> <span style={{marginLeft: 4}}>复制</span>
                                        </div>
                                    </div>
                                    <SyntaxHighlighter
                                        {...props}
                                        children={children}
                                        language={match[1]}
                                        PreTag="div"
                                        wrapLongLines={true}
                                        wrapLines={false}
                                    />
                                </>
                            ) : (
                                <code {...props} className={className}>
                                    {children}
                                </code>
                            );
                        },
                    }}
    >
    {markdown}
    </ReactMarkdown>
  );
}

上述组件接受一个名为markdown的prop，其中包含您要渲染的Markdown内容。

在components重新的code部分的内容，如果是非行内代码块则使用SyntaxHighlighter代码高亮组件，

components中可以重新的内容还有很多，详细参考react-markdown gitHub文档。

1. 在您的应用中使用MarkdownRenderer组件，将Markdown内容传递给它：

function App() {
  const markdownContent = `
  ## Example Markdown

  This is a code block:

  const greeting = "Hello, World!";
  console.log(greeting`);`

  This is a table:

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Content 1 | Content 2 |
  `;

  return (
    <div className="App">
    <MarkdownRenderer markdown={markdownContent} />
    </div>
  );
}

这将在您的React应用中呈现Markdown内容，并使用remark-gfm插件支持GitHub Flavored Markdown，以及rehype-color-chips插件来着色代码块中的语法高亮。

1. 最后，确保您的项目中已经配置了CSS样式以正确显示Markdown内容和代码块中的语法高亮。您可能需要使用一些样式库，如Prism.js或highlight.js，来实现代码块的高亮显示。

这样，您就可以在React应用中使用react-markdown与remark-gfm和rehype-color-chips插件来渲染Markdown内容并为代码块添加语法高亮。