{"id":50551174,"url":"https://github.com/alfredosalzillo/mui-markdown","last_synced_at":"2026-06-04T03:30:20.444Z","repository":{"id":350648177,"uuid":"1175299448","full_name":"alfredosalzillo/mui-markdown","owner":"alfredosalzillo","description":"A Material UI (MUI) component to render Markdown with React Markdown.","archived":false,"fork":false,"pushed_at":"2026-04-11T14:03:31.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-03T05:36:15.651Z","etag":null,"topics":["markdown","markdown-react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfredosalzillo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["alfredosalzillo"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2026-03-07T14:19:01.000Z","updated_at":"2026-04-11T14:03:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/alfredosalzillo/mui-markdown","commit_stats":null,"previous_names":["alfredosalzillo/mui-markdown"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alfredosalzillo/mui-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmui-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmui-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmui-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmui-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfredosalzillo","download_url":"https://codeload.github.com/alfredosalzillo/mui-markdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmui-markdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33888302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","markdown-react"],"created_at":"2026-06-04T03:30:19.509Z","updated_at":"2026-06-04T03:30:20.437Z","avatar_url":"https://github.com/alfredosalzillo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alfredosalzillo"],"categories":[],"sub_categories":[],"readme":"# @alfredo.salzillo/mui-markdown\n\nA Material UI (MUI) component to render Markdown with [react-markdown](https://github.com/remarkjs/react-markdown).\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Customizing Prism Themes](#customizing-prism-themes)\n  - [Customizing Components](#customizing-components)\n  - [Adding Remark Plugins](#adding-remark-plugins)\n  - [Passing React Markdown Options](#passing-react-markdown-options)\n- [Props](#props)\n- [Peer Dependencies](#peer-dependencies)\n- [License](#license)\n\n## Features\n\n- 🎨 **MUI Components**: Automatically uses MUI components (Typography, Link, Table, etc.) for rendering.\n- 📝 **GitHub Flavored Markdown**: Includes `remark-gfm` for tables, task lists, and more.\n- 🆔 **Heading IDs**: Includes `remark-heading-id` for custom header IDs.\n- 💻 **Syntax Highlighting**: Built-in syntax highlighting using `prism-react-renderer` with GitHub themes.\n- 🛠️ **Customizable**: Override default components or add your own `remark` plugins.\n\n## Installation\n\nTo install `@alfredo.salzillo/mui-markdown`:\n\n```bash\nnpm install @alfredo.salzillo/mui-markdown\n```\n\nor with yarn:\n\n```bash\nyarn add @alfredo.salzillo/mui-markdown\n```\n\n## Usage\n\n```tsx\nimport MuiMarkdown from '@alfredo.salzillo/mui-markdown';\n\nconst markdown = `\n# Hello World\nThis is a **bold** text and a [link](https://mui.com).\n\n\\`\\`\\`ts\nconst hello = \"world\";\nconsole.log(hello);\n\\`\\`\\`\n`;\n\nfunction App() {\n  return (\n    \u003cMuiMarkdown\u003e\n      {markdown}\n    \u003c/MuiMarkdown\u003e\n  );\n}\n```\n\n### Customizing Prism Themes\n\nYou can import and use different Prism themes. `githubDark` is the default theme, but `githubLight` is also available:\n\n```tsx\nimport MuiMarkdown from '@alfredo.salzillo/mui-markdown';\nimport { githubLight } from '@alfredo.salzillo/mui-markdown/prism-themes/github-light';\n\nfunction App() {\n  return (\n    \u003cMuiMarkdown prismTheme={githubLight}\u003e\n      {markdown}\n    \u003c/MuiMarkdown\u003e\n  );\n}\n```\n\n### Customizing Components\n\nYou can override default components by passing a `components` prop. This is useful if you want to change the style of a specific element:\n\n```tsx\nimport MuiMarkdown from '@alfredo.salzillo/mui-markdown';\nimport { Typography } from '@mui/material';\n\nfunction App() {\n  return (\n    \u003cMuiMarkdown\n      components={{\n        h1: ({ children }) =\u003e \u003cTypography variant=\"h4\" color=\"primary\"\u003e{children}\u003c/Typography\u003e,\n      }}\n    \u003e\n      # This will be rendered as an H4 in primary color\n    \u003c/MuiMarkdown\u003e\n  );\n}\n```\n\n### Adding Remark Plugins\n\nYou can add additional `remark` plugins using the `remarkPlugins` prop:\n\n```tsx\nimport MuiMarkdown from '@alfredo.salzillo/mui-markdown';\nimport remarkEmoji from 'remark-emoji';\n\nfunction App() {\n  return (\n    \u003cMuiMarkdown remarkPlugins={[remarkEmoji]}\u003e\n      Hello :dog:!\n    \u003c/MuiMarkdown\u003e\n  );\n}\n```\n\n### Passing React Markdown Options\n\nYou can pass additional props to the underlying `react-markdown` component using `reactMarkdownOptions`:\n\n```tsx\nimport MuiMarkdown from '@alfredo.salzillo/mui-markdown';\n\nfunction App() {\n  return (\n    \u003cMuiMarkdown\n      reactMarkdownOptions={{\n        skipHtml: true,\n        unwrapDisallowed: true,\n      }}\n    \u003e\n      # No HTML here \u003cspan\u003etest\u003c/span\u003e\n    \u003c/MuiMarkdown\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `children` | `string` | The markdown content to render. |\n| `remarkPlugins` | `PluggableList` | Additional remark plugins to use. |\n| `components` | `Components` | Custom component overrides for `react-markdown`. |\n| `prismTheme` | `PrismTheme` | Prism theme for code blocks. Defaults to `githubDark`. |\n| `reactMarkdownOptions` | `Options` | Additional options to pass to `react-markdown`. |\n\n## Peer Dependencies\n\nEnsure you have the following packages installed in your project:\n\n- `@mui/material` (\u003e=9.0.0)\n- `@emotion/react` (\u003e=11.0.0)\n- `@emotion/styled` (\u003e=11.0.0)\n- `@mui/icons-material` (\u003e=9.0.0)\n- `react` (\u003e=18.0.0)\n- `react-dom` (\u003e=18.0.0)\n- `react-markdown` (\u003e=10.1.0)\n- `prism-react-renderer` (\u003e=2.4.1)\n\n## License\n\nMIT © [alfredo salzillo](https://github.com/alfredosalzillo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fmui-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfredosalzillo%2Fmui-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fmui-markdown/lists"}