React Markdown + JOY UI

React Markdown + JOY UI #

Hosein Pouyanmehr (opens new window)

目录 #

关于本文 #

本文将帮助您在 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)上看看我的代码兴趣。