react react-markdown ant design pro .md文件显示显示本地图片

最新推荐文章于 2025-06-02 23:07:57 发布

runrun117

最新推荐文章于 2025-06-02 23:07:57 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/runrun117/article/details/118029047

本文介绍如何在Ant Design Pro项目中利用react-markdown展示包含本地图片的.md文件。通过安装并使用react-syntax-highlighter, remark-gfm, markdown-navbar, react-markdown, 和 rehype-raw等包，解析.md文件并呈现导航和内容。图片和静态资源存储在项目的public目录下，可以直接通过URL访问。.md文件中的图片引用也能正确显示。" 113084163,10541877,Java在线编程：十大在线IDE和编译器推荐,"['java在线编辑', '在线IDE', '前端开发']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要在antd的项目中显示操作手册，操作手册以.md文件形式展开，所有文件，照片全部保存在前端项目中。

react-markdown使用

cnpm install react-syntax-highlighter –save

cnpm install –save remark-gfm

cnpm install –save markdown-navbar 生成.md导航的

cnpm install –save react-markdown 主要解析.md文件的

cnpm install –save rehype-raw 2021-6-18react-markdown版本中，用于解析.md文件html的

各个包详细的使用自己查吧https://www.npmjs.com/

help.jsx用于作为页面显示.md内容

import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import MarkNav from 'markdown-navbar'