react实现markdown文件预览

react实现markdown文件预览

1、实现md文件预览

1️⃣第一步：安装依赖：

npm install react-markdown remark-gfm

• react-markdown：将 Markdown 渲染为 React 元素。
• remark-gfm：支持 GitHub 风格的 Markdown（如表格、任务列表等）。

2️⃣创建组件进行渲染：

你可以创建一个 MarkdownViewer.jsx 组件：

// MarkdownViewer.jsx
import React, { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';const MarkdownViewer = ({ filePath }) => {const [content, setContent] = useState('');useEffect(() => {fetch(filePath).then((res) => res.text()).then((text) => setContent(text)).catch((err) => console.error(err));}, [filePath]);return (<div className="prose max-w-none"><ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown></div>);
};export default MarkdownViewer;

3️⃣第三步：使用组件

假设你有一个 README.md 文件放在 public 目录下：

// App.jsx
import React from 'react';
import MarkdownViewer from './MarkdownViewer';function App() {return (<div className="p-4"><h1 className="text-2xl font-bold mb-4">Markdown 文件预览</h1><MarkdownViewer filePath="/README.md" /></div>);
}export default App;

2、解决图片不显示

1️⃣使用代理服务器转发图片：

// server.js
const express = require('express');
const cors = require('cors');
const app = express();app.use(cors());app.get('/proxy', async (req, res) => {const imageUrl = req.query.url;if (!imageUrl) return res.status(400).send('No url');try {const response = await fetch(imageUrl);const contentType = response.headers.get('content-type');const buffer = await response.arrayBuffer();res.set('Content-Type', contentType);res.send(Buffer.from(buffer));} catch (e) {res.status(500).send('Image proxy failed');}
});app.listen(8080, () => {console.log('Image proxy running at http://localhost:80');
});

2️⃣请求方式：

![代理图](http://localhost:8080/proxy?url=https://gitee.com/durant7/piclist/raw/master/images/20250531074519.png)

3️⃣自定义图片渲染：

// 自定义 img 渲染
const MarkdownImage = ({ src, alt }) => {return (<imgsrc={'http://localhost:80/proxy?url='+src}alt={alt}style={{ maxWidth: '100%', height: 'auto' }}onError={() => console.warn('图片加载失败：', src)}/>);
};

4️⃣修改md文件渲染方式：

<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{img: MarkdownImage,}}>{content}
</ReactMarkdown>

3、实现效果