unplugin-markdown

Compile Markdown to matter/html/react on Vite/Respack.

Install

pnpm add -D unplugin-markdown

Config

Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import markdown from 'unplugin-markdown/vite'

export default defineConfig({
  plugins: [react(), markdown()],
})

Respack

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import markdown from 'unplugin-markdown/rspack'

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [markdown()],
    },
  },
})

Usage

Import HTML from Markdown

import html from './example.md?html'

document.body.innerHTML = html

Import React from Markdown

import Example from './example.md?react'

function App() {
  return (
    <div>
      <Example />
    </div>
  )
}

Import Frontmatter from Markdown

import { frontmatter } from './example.md?frontmatter'

console.log(frontmatter.title) // 'Hello World'

Import Toc from Markdown

import { toc } from './example.md?toc'

console.log(toc) // [{ level: 1, id: 'hello-world', title: 'Hello World', children: [{ level: 2, id: 'hello-world-1', title: 'Hello World 1' }] }]