React Markdown + JOY UI
React Markdown + JOY UI #
目录 #
关于本文 #
本文将帮助您在 React 和 Joy UI 项目中快速而美观地渲染 Markdown。
在项目中使用 Markdown #
使用 MD 或 MDX，您可以快速编写富格式内容，即使在将其转换为 HTML 之前，它也相当易读。还有一些其他好处，您也可以了解更多相关信息。
[](#abo 关于“jui-markdown”包 #
"jui-markdown" (opens new window)使用了"markdown-to-jsx" (opens new window)和"Joy UI" (opens new window)。我发现这两个一起使用非常简单和好用。如果您使用Joy UI（来自MUI），这个包非常适合您。而且它非常轻量级，只有约10.00Kb（未压缩大小为58.1Kb）。
一些“jui-markdown”的功能
- 标题
- 代码高亮和语言识别
- 内联代码高亮
- 引用组件
- Joy UI按钮组件支持
- 漂亮的链接
- 灵活和可重写
包的使用方法
该包可在npm（和yarn）上获得。
要安装它，只需运行以下命令：
# 使用npm
npm i jui-markdown
# 使用yarn
yarn add jui-markdown
然后将markdown作为子元素传递：
import React from 'reac 将以下Markdown翻译成中文并删除一级标题：
import { JuiMarkdown } from 'jui-markdown'; // 你也可以使用 // import JuiMarkdown from 'jui-markdown'; // 但是第一种方法是推荐的。
const App = () => {
return # 你好，Markdown！}
export default App;
进入全屏模式 退出全屏模式
## [](#docs)文档
要更熟悉这个包，你可以阅读[GitHub](https://github.com/HPouyanmehr/jui-markdown)或[NPM](https://www.npmjs.com/package/jui-markdown)上的文档。
* * *
嗨！我是[**Hosein Pouyanmehr**](https://hpouyanmehr.com/)。我喜欢分享我所学和我发现有趣的东西。我们在[LinkedIn](https://www.linkedin.com/in/hpouyanmehr/)上联系吧。
在[GitHub](https://github.com/HPouyanmehr)上看看我的代码兴趣。