react-markdown在React的使用示例
目录
- 1. 使用Vite创建React TypeScript项目
- 2. 安装react-markdown依赖
- 3. 创建示例组件
- 4. 添加一些CSS样式
- 5. 运行项目
- 高级功能示例
1. 使用Vite创建React TypeScript项目
首先，在当前目录中创建一个新的React TypeScript项目：
npm create vite@latest . --template react-ts
执行此命令后，按照提示完成项目初始化。
2. 安装react-markdown依赖
npm install react-markdown
3. 创建示例组件
现在，让我们修改App.tsx文件来展示react-markdown的使用：
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><textareavalue={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编辑器和预览区域看起来更好：
.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. 运行项目
npm run dev
高级功能示例
如果您想要添加更多功能，例如语法高亮和插件支持，可以安装额外的包：
npm install remark-gfm rehype-highlight
然后更新App.tsx以使用这些插件：
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><textareavalue={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：
<!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>
