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 (
        <img
            src={'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、实现效果