解析Markdown文件生成React组件文档

最新推荐文章于 2024-08-09 07:27:39 发布
最新推荐文章于 2024-08-09 07:27:39 发布
阅读量443 收藏
点赞数
文章标签： react.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61392261/article/details/120433788
版权
本文介绍了如何基于Markdown文件创建一个React组件文档应用，以解决团队成员了解和使用公共组件的问题。文章讨论了选用StoryBook的缺点，提出了自建解析Markdown文档应用的方案，并详细阐述了实现过程，包括使用single-spa基座、markdown-loader、react-showdown等工具，以及解决代码高亮和组件示例复杂性等问题的方法。
摘要由CSDN通过智能技术生成

前言

最近做的项目使用了微前端框架single-spa。

对于这类微前端框架而言，通常有个utility应用，也就是公共应用，里面是各个子应用之间可以共用的一些公共组件或者方法。

对于一个团队而言，项目中公共组件和方法的使用难点不在于封装不在于技术，很多时候在于团队内部成员是否都能了解这些组件，以避免重复开发，从而提升团队效率。

如果是团队比较小，人员比较稳定的项目组可能还好点，对于团队比较大，人员流动较快的团队，这些通用组件和方法往往就被人遗忘在角落，很难再得到有效利用。

因为我所在的项目还在开发初期，并且是新入职也想去熟悉一下当前项目中的一些通用组件和方法，所以我自己特意开发了一个文档应用去解决这个问题。

技术方案选型

对于一个面向Ant Design编程的咸鱼而言，这个文档应用肯定是往这个方向做。

目标是能做成Ant Design的组件文档那样好用，既能很快看清组件的使用效果，也能快速复制示例代码。

有了目标之后，很快选定了两个技术方案

  • StoryBook方案
  • 自己开发解析markdown文件的文档应用

StoryBook是市面上一款比较流行的构建UI组件和文档的库，功能很强大。

但是这个库如果要应用到我们项目的团队存在以下问题：

  • 英文文档，有学习成本
  • 引入single-spa的utility应用很麻烦
  • 对于构建在utility应用中的组件，需要在StoryBook中再写一遍，容易不同步
  • 对于通用方法可能不支持

尤其是第三点特别存在问题，团队成员大都是业务开发，有交付压力，不是在github上为爱发电的开源贡献者。

他们是否有意愿在utility应用中写了一遍组件代码后，又专门跑到这个StoryBook中再写一道？

如果组件代码修改后，StoryBook这边没修改，这种不同步很容易导致开发人员明明按照文档使用组件，但是组件就是报错，挫败感很强。

联系到现实，我已经预想到如果走这个方案，一个月内这个玩意就会名存实亡，成为形式主义的存在，在三个月后成为大家都不愿提起的垃圾了。

所以有了第二个方案的诞生：自己开发解析markdown文件的文档应用。

这个方案并不是我凭空想象出来的，而是在前公司中就有这么一个内部应用，组件开发人员自己编写markdown文件，最终生成组件文档，并且应用本身可以

最低0.47元/天 解锁文章
被基金支配的打工人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React组件开发和文档编写解决方案
heyeqingquan的博客
04-28 1509
如何才能更舒适的写一个React组件？ 这个问题不管是对个人，还对团队，都是一个疑难问题，它涉及的不仅仅只是工程构建的问题，还涉及了对组件的运营维护成本问题上。 总所周知，一个React组件就是一个npm包，我们往往会有如下的组件目录结构： --- umd umd打包目录，建议用rollup打包， --- lib babel编译后的文件 --...
markdown-react:这是一个内置了HTML5，CSS和ReactJS的简单应用程序
05-13
降价预览 描述 这是一个使用HTML5，CSS和ReactJS构建的简单应用程序。 演示版 :backhand_index_pointing_right: 截屏 安装 步骤1 :fork_and_knife: 分叉这个仓库！ 第2步 :people_with_bunny_ears: 使用将此仓库克隆到本地计算机 第3步！ :hammer: :hammer: :hammer: 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 用 :red_heart:
react-markdown
shangsiqi1的博客
12-07 580
在react的框架中如何在页面显示用markdown语法写的文字 首先安装 cnpm i react-markdown -S 之后在要使用的页面中引入react-markdown import ReactMarkDown from 'react-markdown' //在jsx语法中引入<ReactMarkDown source={显示的数据} //escapeHtml={false}...
使用react-markdown 自定义组件在 Next.js 中进行渲染
青玉白露的博客
06-19 653
Markdown是一种轻量级标记语言，常用于编写文档、博客等。`react-markdown`是一个React组件，用于将Markdown转换为React组件。在Next.js中使用`react-markdown`，我们可以轻松地渲染Markdown内容，并通过自定义组件来扩展其功能。
react实现markdown
风小猪的博客
07-28 2975
react能使用的markdown文本编辑器插件太少了，还不好用= =，想着自己实现一个，一边学习一边开发。
将markdown转换成实时React示例
08-10
将markdown转换成实时React示例
react_markdown:降价编辑和实时预览的React组件
04-27
React Markdown组件通过解析Markdown字符串，生成对应的React元素，进而展示在用户界面上。 在这个项目中，`react_markdown-master`可能是源代码的主分支或版本，暗示着这是一个开源项目，用户可以下载并根据自己的...
react-markdown：一个使用mark的React markdown渲染器
02-11
React降价 安装 yarn add react prismjs @nju33/react-markdown 例 import { Markdown } from ' @nju33/react-markdown ' // ... return < Markdown xss=removed> 如果您输入代码，则还需要导入一个prismjs主题。 import ' path/to/your-favorite-theme.css ' 如果要使用自己喜欢的元素，可以使用它。 例如，如果您想使用我最喜欢的Heading组件，则将其传递给MarkdownRenderer 。 import { MarkdownRenderer , Markdown } from ' @nju33/react-markdown ' // ... return (
使用React-Markdown：从入门到实践
最新发布
gitblog_00498的博客
08-09 897
使用React-Markdown：从入门到实践 react-markdownMarkdown component for React项目地址:https://gitcode.com/gh_mirrors/re/react-markdown 项目介绍 React-Markdown 是一个基于统一处理（unified processing）的库，它专为React设计，让你安全且高效地在React应用...
markdown-to-react-loader:Webpack加载器，用于将Markdown文件转换为React组件
05-08
降价到React加载器 一个Webpack加载器，用于将Markdown文件转换为React组件（JSX）。 当前支持导入，语法突出显示和其他数据。 该加载器是为记录React组件而构建的，但可用于要转换为HTML的其他静态文档。 变成这样： # Hello, World Its great to be here! 变成这个： import React , { Fragment } from 'react' ; const Markdown = ( ) => ( < Fragment> < h1> Hello, World < / h1 > < p> Its great to be here! < / p > < / Fragment > ) ; export default Markdown ; 注意：需要React 16.2+ 安装 yarn
react-markdown-el:一个简单的 React 组件，用于解析和呈现 Markdown 文本
06-12
React降价-el 提供一个简单的React组件，用于在元素中呈现 Markdown 文本。 安装 $ npm install react-markdown-el 用法 基本用法只是将 markdown 作为text属性： var Markdown = require('react-markdown-el'); ... render: function() { var text = "This *is* some `markdown` [text](http://example.com)"; return ( <Markdown text={text}/> ) } 默认情况下，这将渲染一个带有class="markdown"的<div> 。 您可以更改标签，或非常轻松地添加您自己的属性： <Markdown el="a" href="h
react-showdown：将markdown和markdown中的React组件渲染为React组件！
02-04
React摊牌 渲染降价和降价之内React的组分！ 产品特点 将markdown渲染为React组件。 在降价范围内渲染React组件！ 完整的TypeScript支持。 经过全面测试。 支持所有，例如和。 2.0中的新功能：支持摊牌风味！ 2.1的新功能： 修复 ：自关闭组件后缺少内容。 这是固定的对决配置的默认值设置recognizeSelfClosing至true 。 谢谢 新功能：添加新的可选sanitizeHtml道具，用于在呈现HTML之前对其进行消毒。 感谢 。 安装 npm install --save react-showdown 要么 yarn add
markdownpreviewer:使用React和Showdown制作的Markdown预览器
05-01
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
React-RDoc是一套基于React的文档生成工具用于生成文档网站或简单的博客网站
08-14
RDoc 是一套基于React的文档生成工具，用于生成文档网站或简单的博客网站
react解析markdown文件
anmizhan5851的博客
06-10 1112
当当当又get到了一个新技能，使用react-markdown来直接解析markdown文件（咳咳，小菜鸟的自娱自乐） 项目中遇到了一个API的那种展示方式，类似于入门手册啥的那种，如果是一个个调用接口，改样式很复杂，所以用了直接解析后台给的markdown文件 首先我们需要安装一个react的网页语法高亮插件，（我最初并没有安装这个，结果导致解析文件是出来了，但是样式还挺丑的） ...
React中解析markdown（react-markdown插件）
mus-z的博客
05-24 4562
https://github.com/rexxars/react-markdown yarn add react-markdown import ReactMarkdown from "react-markdown" let markdown='# P01:课程介绍和环境搭建\n' + '[ **M** ] arkdown + E [ **ditor** ] = **Mditor** \n' + '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器
Ant design pro-项目探究（7）react的markdown编辑器
weixin_45229417的博客
03-07 1920
普通的input和textarea已满足大部分的文本记录，但想要让输入文本更加多样化，markdown编辑器可谓是yyds。但是vue版本的markdown编辑器众多，基于react版本的编辑器就相当少一些。以下是整合和探究react版本的markdown的实践。
react显示markdown文件
05-21
要在React中显示Markdown文件，你可以使用`react-markdown`库。这个库可以将Markdown转换为React组件，这样就可以在React应用程序中显示Markdown文件。 首先，安装`react-markdown`库： ``` npm install react-markdown ``` 然后，在你的React组件中引入它： ```jsx import React from 'react'; import ReactMarkdown from 'react-markdown'; function MarkdownViewer(props) { return ( <div> <ReactMarkdown>{props.markdown}</ReactMarkdown> </div> ); } export default MarkdownViewer; ``` 在上面的代码中，`MarkdownViewer`组件接收一个`markdown`属性，将其传递给`ReactMarkdown`组件。在`ReactMarkdown`组件中，Markdown将被转换为React组件并渲染在页面上。 现在，你可以在你的应用程序中使用`MarkdownViewer`组件来显示Markdown文件： ```jsx <MarkdownViewer markdown="# Hello, world!" /> ``` 这将在页面上显示一个标题为“Hello, world!”的Markdown文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值