https://github.com/alfredosalzillo/mui-markdown
A Material UI (MUI) component to render Markdown with React Markdown.
https://github.com/alfredosalzillo/mui-markdown
markdown markdown-react
Last synced: about 1 month ago
JSON representation
A Material UI (MUI) component to render Markdown with React Markdown.
- Host: GitHub
- URL: https://github.com/alfredosalzillo/mui-markdown
- Owner: alfredosalzillo
- Created: 2026-03-07T14:19:01.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-11T14:03:31.000Z (3 months ago)
- Last Synced: 2026-05-03T05:36:15.651Z (2 months ago)
- Topics: markdown, markdown-react
- Language: TypeScript
- Homepage:
- Size: 193 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Agents: AGENTS.md
Awesome Lists containing this project
README
# @alfredo.salzillo/mui-markdown
A Material UI (MUI) component to render Markdown with [react-markdown](https://github.com/remarkjs/react-markdown).
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Customizing Prism Themes](#customizing-prism-themes)
- [Customizing Components](#customizing-components)
- [Adding Remark Plugins](#adding-remark-plugins)
- [Passing React Markdown Options](#passing-react-markdown-options)
- [Props](#props)
- [Peer Dependencies](#peer-dependencies)
- [License](#license)
## Features
- 🎨 **MUI Components**: Automatically uses MUI components (Typography, Link, Table, etc.) for rendering.
- 📝 **GitHub Flavored Markdown**: Includes `remark-gfm` for tables, task lists, and more.
- 🆔 **Heading IDs**: Includes `remark-heading-id` for custom header IDs.
- 💻 **Syntax Highlighting**: Built-in syntax highlighting using `prism-react-renderer` with GitHub themes.
- 🛠️ **Customizable**: Override default components or add your own `remark` plugins.
## Installation
To install `@alfredo.salzillo/mui-markdown`:
```bash
npm install @alfredo.salzillo/mui-markdown
```
or with yarn:
```bash
yarn add @alfredo.salzillo/mui-markdown
```
## Usage
```tsx
import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
const markdown = `
# Hello World
This is a **bold** text and a [link](https://mui.com).
\`\`\`ts
const hello = "world";
console.log(hello);
\`\`\`
`;
function App() {
return (
{markdown}
);
}
```
### Customizing Prism Themes
You can import and use different Prism themes. `githubDark` is the default theme, but `githubLight` is also available:
```tsx
import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import { githubLight } from '@alfredo.salzillo/mui-markdown/prism-themes/github-light';
function App() {
return (
{markdown}
);
}
```
### Customizing Components
You can override default components by passing a `components` prop. This is useful if you want to change the style of a specific element:
```tsx
import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import { Typography } from '@mui/material';
function App() {
return (
{children},
}}
>
# This will be rendered as an H4 in primary color
);
}
```
### Adding Remark Plugins
You can add additional `remark` plugins using the `remarkPlugins` prop:
```tsx
import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import remarkEmoji from 'remark-emoji';
function App() {
return (
Hello :dog:!
);
}
```
### Passing React Markdown Options
You can pass additional props to the underlying `react-markdown` component using `reactMarkdownOptions`:
```tsx
import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
function App() {
return (
# No HTML here test
);
}
```
## Props
| Prop | Type | Description |
| --- | --- | --- |
| `children` | `string` | The markdown content to render. |
| `remarkPlugins` | `PluggableList` | Additional remark plugins to use. |
| `components` | `Components` | Custom component overrides for `react-markdown`. |
| `prismTheme` | `PrismTheme` | Prism theme for code blocks. Defaults to `githubDark`. |
| `reactMarkdownOptions` | `Options` | Additional options to pass to `react-markdown`. |
## Peer Dependencies
Ensure you have the following packages installed in your project:
- `@mui/material` (>=9.0.0)
- `@emotion/react` (>=11.0.0)
- `@emotion/styled` (>=11.0.0)
- `@mui/icons-material` (>=9.0.0)
- `react` (>=18.0.0)
- `react-dom` (>=18.0.0)
- `react-markdown` (>=10.1.0)
- `prism-react-renderer` (>=2.4.1)
## License
MIT © [alfredo salzillo](https://github.com/alfredosalzillo)