{"_id":"@alfredo.salzillo/mui-markdown","_rev":"2-8abc1c23c03e05c4f5c59c5f961bd7b0","name":"@alfredo.salzillo/mui-markdown","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@alfredo.salzillo/mui-markdown","version":"0.1.0","keywords":["react","markdown","mui","material-ui","react-markdown","component"],"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","_id":"@alfredo.salzillo/mui-markdown@0.1.0","maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"homepage":"https://github.com/alfredosalzillo/mui-markdown#readme","bugs":{"url":"https://github.com/alfredosalzillo/mui-markdown/issues"},"dist":{"shasum":"a69ae721f8e2030acf31b90b3f487756d0056fc0","tarball":"https://registry.npmjs.org/@alfredo.salzillo/mui-markdown/-/mui-markdown-0.1.0.tgz","fileCount":243,"integrity":"sha512-R+LP75pjTpW+BMN0pm0FOajicNCB9bPTMdsoQFndZCXoYoLp+G5VbzPYCAU6G51qswSyfeW4Ar2TiL+GwdmfSQ==","signatures":[{"sig":"MEUCIQCJaKOWyfuR5mTHyuWHVo0wVm8A2c5S2mFXRBS8a4NBUQIgVuOzKJ6R4cLHLpiLFJVVa4zJ3q9ZzO6LF5L3PtJ3snI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":393782},"main":"dist/index.cjs.js","types":"dist/index.d.ts","volta":{"node":"24.14.0"},"module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./prism-themes/*":{"types":"./dist/prism-themes/*.d.ts","import":"./dist/prism-themes/*.es.js","require":"./dist/prism-themes/*.cjs.js"}},"funding":{"url":"https://github.com/sponsors/alfredosalzillo"},"gitHead":"9b51b806e442fb07b6515a833aa4268a5820a42f","private":false,"scripts":{"dev":"vite","lint":"biome lint .","build":"vite build","check":"biome check --write .","format":"biome format --write .","prepare":"npm run build"},"_npmUser":{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"},"repository":{"url":"git+https://github.com/alfredosalzillo/mui-markdown.git","type":"git"},"_npmVersion":"11.9.0","description":"A Material UI (MUI) component to render Markdown with React Markdown.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"remark-gfm":"^4.0.1","remark-heading-id":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.5.3","@types/node":"^25.3.5","@types/react":"^19.2.14","@mui/material":"^7.3.9","@biomejs/biome":"2.4.6","@emotion/react":"^11.14.0","react-markdown":"^10.1.0","@emotion/styled":"^11.14.1","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@mui/icons-material":"^7.3.9","@vitejs/plugin-react":"^5.1.4","prism-react-renderer":"^2.4.1","@types/remark-heading-id":"^1.0.0","rollup-plugin-preserve-directives":"^0.4.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mui/material":">=7.0.0","@emotion/react":">=11.0.0","react-markdown":">=10.1.0","@emotion/styled":">=11.0.0","@mui/icons-material":">=7.0.0","prism-react-renderer":">=2.4.1"},"_npmOperationalInternal":{"tmp":"tmp/mui-markdown_0.1.0_1772906222574_0.1319389894413363","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@alfredo.salzillo/mui-markdown","version":"1.0.0","private":false,"description":"A Material UI (MUI) component to render Markdown with React Markdown.","repository":{"type":"git","url":"git+https://github.com/alfredosalzillo/mui-markdown.git"},"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/alfredosalzillo/mui-markdown/issues"},"funding":{"url":"https://github.com/sponsors/alfredosalzillo"},"homepage":"https://github.com/alfredosalzillo/mui-markdown#readme","keywords":["react","markdown","mui","material-ui","react-markdown","component"],"main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./prism-themes/*":{"types":"./dist/prism-themes/*.d.ts","import":"./dist/prism-themes/*.es.js","require":"./dist/prism-themes/*.cjs.js"}},"scripts":{"dev":"vite","build":"vite build","prepare":"npm run build","lint":"biome lint .","format":"biome format --write .","check":"biome check --write ."},"devDependencies":{"@biomejs/biome":"2.4.6","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0","@mui/material":"^9.0.0","@types/node":"^25.3.5","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@types/remark-heading-id":"^1.0.0","@vitejs/plugin-react":"^6.0.1","prism-react-renderer":"^2.4.1","react-markdown":"^10.1.0","typescript":"^6.0.2","vite":"^8.0.8"},"peerDependencies":{"@emotion/react":">=11.0.0","@emotion/styled":">=11.0.0","@mui/icons-material":">=9.0.0","@mui/material":">=9.0.0","prism-react-renderer":">=2.4.1","react":">=18.0.0","react-dom":">=18.0.0","react-markdown":">=10.1.0"},"dependencies":{"remark-gfm":"^4.0.1","remark-heading-id":"^1.0.1","unplugin-dts":"^1.0.0-beta.6"},"volta":{"node":"24.14.0"},"gitHead":"bcdba25e58f212277fcb85c91481136ddacea6e8","_id":"@alfredo.salzillo/mui-markdown@1.0.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-0NH0f7fkcmP/Dn25F/KTB/ehM5VNxFVfm+/mUqApUVlk9bkWMD+nQ2EhNPsSKxRlkVCm68xriTR2HHAX3IHbXA==","shasum":"3cf079c4d97852f3ff127236038e75ed5a75be5c","tarball":"https://registry.npmjs.org/@alfredo.salzillo/mui-markdown/-/mui-markdown-1.0.0.tgz","fileCount":239,"unpackedSize":356696,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD7jBVognj0x09thQInbVUHNR9w0VyUefDVExDq9TOkKwIhALbF1NRMTkz1lwFMB/ULcOj1IsLN+kiI4XFGVBLcyVvZ"}]},"_npmUser":{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"},"directories":{},"maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mui-markdown_1.0.0_1775902017882_0.5532881924139206"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-07T17:57:02.507Z","modified":"2026-04-11T10:06:58.125Z","0.1.0":"2026-03-07T17:57:02.758Z","1.0.0":"2026-04-11T10:06:58.015Z"},"bugs":{"url":"https://github.com/alfredosalzillo/mui-markdown/issues"},"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","homepage":"https://github.com/alfredosalzillo/mui-markdown#readme","keywords":["react","markdown","mui","material-ui","react-markdown","component"],"repository":{"type":"git","url":"git+https://github.com/alfredosalzillo/mui-markdown.git"},"description":"A Material UI (MUI) component to render Markdown with React Markdown.","maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"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    <MuiMarkdown>\n      {markdown}\n    </MuiMarkdown>\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    <MuiMarkdown prismTheme={githubLight}>\n      {markdown}\n    </MuiMarkdown>\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    <MuiMarkdown\n      components={{\n        h1: ({ children }) => <Typography variant=\"h4\" color=\"primary\">{children}</Typography>,\n      }}\n    >\n      # This will be rendered as an H4 in primary color\n    </MuiMarkdown>\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    <MuiMarkdown remarkPlugins={[remarkEmoji]}>\n      Hello :dog:!\n    </MuiMarkdown>\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    <MuiMarkdown\n      reactMarkdownOptions={{\n        skipHtml: true,\n        unwrapDisallowed: true,\n      }}\n    >\n      # No HTML here <span>test</span>\n    </MuiMarkdown>\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` (>=9.0.0)\n- `@emotion/react` (>=11.0.0)\n- `@emotion/styled` (>=11.0.0)\n- `@mui/icons-material` (>=9.0.0)\n- `react` (>=18.0.0)\n- `react-dom` (>=18.0.0)\n- `react-markdown` (>=10.1.0)\n- `prism-react-renderer` (>=2.4.1)\n\n## License\n\nMIT © [alfredo salzillo](https://github.com/alfredosalzillo)\n","readmeFilename":"README.md"}