**UIW React Markdown Preview 使用指南**

UIW React Markdown Preview 使用指南

react-markdown-previewReact component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.项目地址:https://gitcode.com/gh_mirrors/re/react-markdown-preview

---

项目介绍

UIW React Markdown Preview 是一个基于 React 的组件库，它允许开发者轻松地将 Markdown 文本转换为 HTML 预览。这个项目由 UIW 开发并维护，提供了丰富的定制选项，包括编辑器工具栏的显示控制、Markdown 渲染选项以及模式切换功能，使得在 web 应用中集成Markdown编辑和预览变得简单高效。

项目快速启动

要快速开始使用 @uiw/react-markdown-preview, 首先确保你的项目支持 ES6 模块或 CommonJS，并且已经安装了 Node.js 环境。

安装

通过npm或yarn添加依赖：

npm install @uiw/react-markdown-preview --save
# 或者，如果你使用yarn
yarn add @uiw/react-markdown-preview

基本使用示例

接下来，在你的 React 组件中引入并使用 MarkdownPreview：

import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const markdownText = `
# 标题一
这是正文部分。
- 列表项一
- 列表项二
`;

const QuickStart = () => (
  <MarkdownPreview value={markdownText} />
);

export default QuickStart;

此代码段展示了如何将一段Markdown文本转换为可视化预览。

应用案例和最佳实践

在开发过程中，充分利用 @uiw/react-markdown-preview 的特性，比如控制是否展示工具栏，自定义预览样式等。例如，创建一个受控组件以实时同步编辑状态：

import React, { useState } from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const ControlledEditor = () => {
  const [content, setContent] = useState('# 控制面板演示\n这里是Markdown内容');

  return (
    <div>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        style={{ width: '100%', height: '300px', marginBottom: '20px' }}
      />
      <MarkdownPreview value={content} />
    </div>
  );
};

export default ControlledEditor;

这种模式下，用户可以直接在文本框输入Markdown语法，而预览区域会实时更新。

典型生态项目

虽然指定项目主要是关于Markdown预览，但UIW 提供了一套完整的前端组件解决方案。在更广泛的生态中，结合如 @uiw/react-md-editor 可以提供更为完整的Markdown编辑体验，它集成了编辑器和预览功能，适合于构建笔记应用、博客平台等场景。

注：了解更深入的用法及配置选项，请参考UIW React Markdown Preview 官方文档。这不仅有助于快速上手，还能探索更多高级特性和自定义技巧来满足特定的应用需求。

react-markdown-previewReact component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.项目地址:https://gitcode.com/gh_mirrors/re/react-markdown-preview