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)上看看我的代码兴趣。