【亲测免费】 React Markdown 使用教程

项目介绍

react-markdown 是一个用于在 React 应用中渲染 Markdown 的库。它通过构建虚拟 DOM 来确保 React 只替换从语法树中变化的部分，从而提高了性能。react-markdown 使用 unified 生态系统，特别是 remark 和 rehype，这些工具通过插件来转换内容，使得处理 Markdown 更加灵活和强大。

项目快速启动

安装

在 Node.js 环境中，使用 npm 安装 react-markdown：

npm install react-markdown

基本使用

以下是一个简单的示例，展示如何在 React 应用中使用 react-markdown：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Markdown from 'react-markdown';

const markdown = '# 你好，世界！\n\n这是一些 **Markdown** 内容。';

createRoot(document.body).render(<Markdown>{markdown}</Markdown>);

应用案例和最佳实践

代码高亮

结合 react-syntax-highlighter，可以实现代码块的高亮显示：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Markdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

const markdown = '这里有一些 JavaScript 代码：\n\n```js\nconsole.log("它工作了！");\n```';

const components = {
  code({ node, inline, className, children, ...props }) {
    const match = /language-(\w+)/.exec(className || '');
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" {...props}>
        {String(children).replace(/\n$/, '')}
      </SyntaxHighlighter>
    ) : (
      <code className={className} {...props}>
        {children}
      </code>
    );
  },
};

createRoot(document.body).render(<Markdown components={components}>{markdown}</Markdown>);

典型生态项目

remark 和 rehype 插件

react-markdown 可以与 remark 和 rehype 插件结合使用，以扩展其功能。例如，使用 remark-gfm 插件来支持 GitHub Flavored Markdown：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Markdown from 'react-markdown';
import gfm from 'remark-gfm';

const markdown = '这是一个表格：\n\n| 列1 | 列2 |\n| --- | --- |\n| 数据1 | 数据2 |';

createRoot(document.body).render(<Markdown remarkPlugins={[gfm]}>{markdown}</Markdown>);

通过这些示例和最佳实践，您可以开始在 React 项目中有效地使用 react-markdown 来渲染和处理 Markdown 内容。