React Markdown 使用教程
react-markdown项目地址:https://gitcode.com/gh_mirrors/rea/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 内容。
react-markdown项目地址:https://gitcode.com/gh_mirrors/rea/react-markdown