react使用markdown代码块

在 React 中，可以使用第三方库 React Markdown，它可以将 Markdown 格式的文本转换成 HTML 格式，并且支持代码块的渲染。

首先，需要安装 React Markdown：

npm install react-markdown

然后，可以在组件中引入 React Markdown，例如：

import ReactMarkdown from 'react-markdown';

function MyComponent() {
  const markdownText = `
# Hello, world!

Here is a code block:

\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
  `;
  
  return (
    <div>
      <ReactMarkdown source={markdownText} />
    </div>
  );
}

在上面的例子中，我们将 Markdown 格式的文本作为 `source` 属性传递给 `ReactMarkdown` 组件，并且在文本中使用三个反引号来标记代码块。React Markdown 会自动识别代码块，并将其渲染成 `<pre>` 和 `<code>` 标签。

你还可以通过 `renderers` 属性来自定义代码块的渲染方式，例如：

import ReactMarkdown from 'react-markdown';

function MyComponent() {
  const markdownText = `
# Hello, world!

Here is a code block:

\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
  `;

  const CodeBlock = ({ language, value }) => {
    return (
      <pre>
        <code className={`language-${language}`}>{value}</code>
      </pre>
    );
  };
  
  return (
    <div>
      <ReactMarkdown
        source={markdownText}
        renderers={{
          code: CodeBlock
        }}
      />
    </div>
  );
}

在上面的例子中，我们定义了一个名为 `CodeBlock` 的组件来自定义代码块的渲染方式，并将其作为 `renderers` 属性的值传递给 `ReactMarkdown` 组件。在 `CodeBlock` 组件中，我们使用 `prismjs` 库来高亮代码块，并且根据代码块的语言来添加对应的类名。

希望这能帮助到你。