{"id":26980158,"url":"https://github.com/clovu/unplugin-react-markdown","last_synced_at":"2025-04-03T14:30:17.205Z","repository":{"id":254380229,"uuid":"846359472","full_name":"clovu/unplugin-react-markdown","owner":"clovu","description":"Compile Markdown to React component.","archived":false,"fork":false,"pushed_at":"2025-03-10T05:27:37.000Z","size":467,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T14:49:14.561Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clovu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"github":["antfu"]}},"created_at":"2024-08-23T03:30:09.000Z","updated_at":"2025-03-10T05:27:41.000Z","dependencies_parsed_at":"2025-03-10T06:37:52.673Z","dependency_job_id":null,"html_url":"https://github.com/clovu/unplugin-react-markdown","commit_stats":null,"previous_names":["clover-you/unplugin-react-markdown","clovu/unplugin-react-markdown"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clovu%2Funplugin-react-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clovu%2Funplugin-react-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clovu%2Funplugin-react-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clovu%2Funplugin-react-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clovu","download_url":"https://codeload.github.com/clovu/unplugin-react-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018211,"owners_count":20869974,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-04-03T14:30:16.467Z","updated_at":"2025-04-03T14:30:17.179Z","avatar_url":"https://github.com/clovu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/antfu"],"categories":[],"sub_categories":[],"readme":"# unplugin-react-markdown\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-react-markdown?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-react-markdown)\n\nCompile Markdown to React component.\n\n- 📚 Use Markdown as React components.\n- 💚 Use React components in Markdown.\n- 🔌 Supports Vite, Webpack and more, powered by unplugin.\n\n## Install\n\n```bash\npnpm add unplugin-react-markdown\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport Markdown from 'unplugin-react-markdown/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    react({ include: [/\\.md$/] }),\n    Markdown({}),\n  ]\n})\n```\n\nExample: [`examples/vite`](./examples/vite/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNextJS/Webpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// next.config.mjs\n// @ts-check\nimport Markdown from 'unplugin-react-markdown/webpack'\nimport Shiki from '@shikijs/markdown-it'\n\nfunction parseMetaString(_metaString, _code, lang) {\n  return {\n    dataLanguage: lang,\n  }\n}\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  webpack: (config) =\u003e {\n    config.plugins.push(Markdown({\n      markdownItSetup: async (md) =\u003e {\n        md.use(await Shiki({\n          themes: {\n            light: 'vitesse-light',\n            dark: 'nord',\n          },\n          theme: {\n            colorReplacements: {\n              '#2e3440ff': '#282a2d',\n            },\n          },\n          meta: {\n            dataLanguage: 'java',\n          },\n          parseMetaString,\n        }))\n      },\n    }))\n    return config\n  },\n}\n\nexport default nextConfig\n```\n\nExample: [`examples/nextjs`](./examples/nextjs/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Import Markdown as React components\n\n```tsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\n\nimport './index.css'\n\nimport Home, { forntmatter } from './index.md'\n\nconsole.log(forntmatter)\n\ncreateRoot(document.getElementById('root')!).render(\n  \u003cStrictMode\u003e\n    \u003cHome /\u003e\n  \u003c/StrictMode\u003e,\n)\n```\n\n## Use React Components inside Markdown\n\n```markdown\n---\ntitle: Hello World\nimports: |\n  import App from './App'\n---\n\n# Hello World\n\nuse react component\n\n\u003cApp /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclovu%2Funplugin-react-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclovu%2Funplugin-react-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclovu%2Funplugin-react-markdown/lists"}