react-markdown在React的使用示例

- - [1. 使用Vite创建React TypeScript项目](#1. 使用Vite创建React TypeScript项目)
  - [2. 安装react-markdown依赖](#2. 安装react-markdown依赖)
  - [3. 创建示例组件](#3. 创建示例组件)
  - [4. 添加一些CSS样式](#4. 添加一些CSS样式)
  - [5. 运行项目](#5. 运行项目)
  - 高级功能示例

1. 使用Vite创建React TypeScript项目

首先，在当前目录中创建一个新的React TypeScript项目：

bash 复制代码

npm create vite@latest . --template react-ts

执行此命令后，按照提示完成项目初始化。

2. 安装react-markdown依赖

bash 复制代码

npm install react-markdown

3. 创建示例组件

现在，让我们修改App.tsx文件来展示react-markdown的使用：

typescript 复制代码

import { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import './App.css'

function App() {
  const [markdown, setMarkdown] = useState('# Hello, *world*!\n\nThis is a markdown example in React.')

  return (
    <div className="app-container">
      <h1>React Markdown Demo</h1>
      
      <div className="editor-preview-container">
        <div className="editor-container">
          <h2>Markdown Editor</h2>
          <textarea
            value={markdown}
            onChange={(e) => setMarkdown(e.target.value)}
            className="markdown-editor"
          />
        </div>
        
        <div className="preview-container">
          <h2>Preview</h2>
          <div className="markdown-preview">
            <ReactMarkdown>{markdown}</ReactMarkdown>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

4. 添加一些CSS样式

让我们更新App.css文件，使我们的Markdown编辑器和预览区域看起来更好：

css 复制代码

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.editor-preview-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.editor-container,
.preview-container {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
}

.markdown-editor {
  width: 100%;
  height: 300px;
  padding: 10px;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.markdown-preview {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 300px;
  background-color: #f9f9f9;
}

/* Markdown样式 */
.markdown-preview h1 {
  color: #333;
}

.markdown-preview h2 {
  color: #444;
}

.markdown-preview a {
  color: #0077cc;
}

.markdown-preview pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.markdown-preview code {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

.markdown-preview blockquote {
  border-left: 4px solid #ddd;
  padding-left: 10px;
  color: #666;
  margin-left: 0;
}

.markdown-preview img {
  max-width: 100%;
}

5. 运行项目

bash 复制代码

npm run dev

高级功能示例

如果您想要添加更多功能，例如语法高亮和插件支持，可以安装额外的包：

bash 复制代码

npm install remark-gfm rehype-highlight

然后更新App.tsx以使用这些插件：

typescript 复制代码

import { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'
import './App.css'

function App() {
  const [markdown, setMarkdown] = useState('# Hello, *world*!\n\n## GFM 支持\n\n### 表格\n| 功能 | 支持 |\n| ---- | ---- |\n| 表格 | ✅ |\n| 任务列表 | ✅ |\n\n### 任务列表\n- [x] 支持Markdown\n- [x] 支持GFM扩展\n- [ ] 添加更多功能\n\n### 代码高亮\n```javascript\nfunction hello() {\n  console.log("Hello, world!");\n}\n```')

  return (
    <div className="app-container">
      <h1>React Markdown Demo</h1>
      
      <div className="editor-preview-container">
        <div className="editor-container">
          <h2>Markdown Editor</h2>
          <textarea
            value={markdown}
            onChange={(e) => setMarkdown(e.target.value)}
            className="markdown-editor"
          />
        </div>
        
        <div className="preview-container">
          <h2>Preview</h2>
          <div className="markdown-preview">
            <ReactMarkdown 
              remarkPlugins={[remarkGfm]}
              rehypePlugins={[rehypeHighlight]}
            >
              {markdown}
            </ReactMarkdown>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

如果使用代码高亮，您还需要在index.html中添加highlight.js的CSS：

html 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Markdown Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>