NPM version

Compile Markdown to React component.

  • Use Markdown as React components
  • Use React components in Markdown

?‍? Install


ni @pity/vite-plugin-react-markdown -D 
# yarn/npm/pnpm add @pity/vite-plugin-react-markdown -D

Add it to vite.config.js

/** .... */
import Markdown from '@pity/vite-plugin-react-markdown'
export default defineConfig({
  plugins: [
      wrapperComponentName: 'ReactMarkdown',
      wrapperComponentPath: './src/components/page',
      // if you want use components in md file, please add it in this
      // [ComponentName]: `componentPath`
      // ?‍?: the `ComponentName` must be `CamelCase`
      importComponentsPath: {
        ReactTest: './src/components/pages/mdtest',
      // markdownItUses: [
      //   prism,
      // ],

And import it as a normal React component

import Hello from './'
function  App() {
  return (
    <div className="App">
      <Hello />

?‍? Use React components in Markdown

You can even use React components inside your markdown, for example

<ReactTest />

? Frontmatter

Frontmatter will be parsed,

For example:

name: My Cool App

# Hello World

Will be rendered as

<h1>Hello World</h1>

And you can use frontmatter in other and import it from this markdown file.

import {attributes} from './'
// attributes = {name: 'My Cool App'}


@pity/vite-plugin-react-markdown uses markdown-it under the hood, see markdown-it‘s docs for more details

// vite.config.js
import Markdown from '@pity/vite-plugin-react-markdown'

export default {
  plugins: [
      // default options passed to markdown-it
      // see:
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true,
      // A function providing the Markdown It instance gets the ability to apply custom settings/plugins
      markdownItSetup(md) {
        // for example
      // Class names for the wrapper div
      wrapperClasses: 'markdown-body'

See the tsdoc for more advanced options

?‍♂️ Example

See the /example.

?‍♀️ TypeScript Shim

declare module '*.md' {
  import type React from 'react'
  const ReactComponent: React.VFC
  export default ReactComponent

? Credits

This project is inspired by vite-plugin-vue-markdown and mosts of code is from geekris1/vite-plugin-react-markdown

Compare with it:

geekris1/vite-plugin-react-markdown is does’n work in wrapperComponent, and some style is not good.


MIT License © 2022-PRESENT Priority


View Github