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>
<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编辑器和预览区域看起来更好：
.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>
<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：
<!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>
