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

pnpm add unplugin-react-markdown

// 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

// 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

Import Markdown as React components

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(
  <StrictMode>
    <Home />
  </StrictMode>,
)

Use React Components inside Markdown

---
title: Hello World
imports: |
  import App from './App'
---

# Hello World

use react component

<App />