https://github.com/clovu/unplugin-react-markdown
Compile Markdown to React component.
https://github.com/clovu/unplugin-react-markdown
Last synced: about 1 year ago
JSON representation
Compile Markdown to React component.
- Host: GitHub
- URL: https://github.com/clovu/unplugin-react-markdown
- Owner: clovu
- License: mit
- Created: 2024-08-23T03:30:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-10T05:27:37.000Z (about 1 year ago)
- Last Synced: 2025-03-19T14:49:14.561Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 456 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-react-markdown
[](https://www.npmjs.com/package/unplugin-react-markdown)
Compile Markdown to React component.
- 📚 Use Markdown as React components.
- 💚 Use React components in Markdown.
- 🔌 Supports Vite, Webpack and more, powered by unplugin.
## Install
```bash
pnpm add unplugin-react-markdown
```
Vite
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Markdown from 'unplugin-react-markdown/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({ include: [/\.md$/] }),
Markdown({}),
]
})
```
Example: [`examples/vite`](./examples/vite/)
NextJS/Webpack
```ts
// next.config.mjs
// @ts-check
import Markdown from 'unplugin-react-markdown/webpack'
import Shiki from '@shikijs/markdown-it'
function parseMetaString(_metaString, _code, lang) {
return {
dataLanguage: lang,
}
}
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.plugins.push(Markdown({
markdownItSetup: async (md) => {
md.use(await Shiki({
themes: {
light: 'vitesse-light',
dark: 'nord',
},
theme: {
colorReplacements: {
'#2e3440ff': '#282a2d',
},
},
meta: {
dataLanguage: 'java',
},
parseMetaString,
}))
},
}))
return config
},
}
export default nextConfig
```
Example: [`examples/nextjs`](./examples/nextjs/)
## Import Markdown as React components
```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import Home, { forntmatter } from './index.md'
console.log(forntmatter)
createRoot(document.getElementById('root')!).render(
,
)
```
## Use React Components inside Markdown
```markdown
---
title: Hello World
imports: |
import App from './App'
---
# Hello World
use react component
```