The following is based on a Chinese document that was translated using Google Translate

vite-plugin-react-markdown

🚀 Features

• Use Markdown as React Component
• Use React Component in Markdown

🔧 Usage

Install

pnpm add vite-plugin-react-markdown -D 
# npm i vite-plugin-react-markdown -D 
# yarn add vite-plugin-react-markdown -D

Add it to vite.config

import react from "@vitejs/plugin-react";
import Markdown from "vite-plugin-react-markdown";

export default {
  plugins: [
    Markdown(),
    react({
      include: [/\.tsx$/, /\.md$/], // <-- add .md 
    }),
  ],
};

import Markdown as React Component

import ReactComponent from "./vite-plugin-react-markdown-example.md";

function App() {
  return <ReactComponent />;
}

export default App;

use React Component inside Markdown

Use this feature to make sure your Component uses the export default export instead of the export Component. 。

Components that do not have the same name。

first of all, you need to configure wrapperComponent, and you can set it to true, so that all components can be used in md files (this will also cause some performance problems).

// vite.config
// other code omitted
Markdown({
  wrapperComponent: true,
});

you can also set it to src/**/*.{jsx,tsx} to read only the components in the src file.

Markdown({
  wrapperComponent: "src/**/*.{jsx,tsx}",
});

if you want to take components of multiple different folders, you can send an array.

Markdown({
  wrapperComponent: ["src/**/*.{jsx,tsx}", "other/**/*.{jsx,tsx}"],
});

if you pursue the ultimate performance, you can also specify which components to load.

you need to pass an object, the key is the name of the component, and the value is the path relative to the root directory.

Markdown({
  wrapperComponent: { Counter: "src/component/Counter/Counter.tsx" },
});

After the configuration is completed, you can use the right components directly in the md file.

If the component is not specified, the name of the component used is its path name.

For example: src/component/Counter.tsx , The component is called Counte （If the initials are lowercase, they will be converted to uppercase.）

# An example of loading components
<Counter/>

attributes

// vite-plugin-react-markdown-example.md
---
title: vite-plugin-react-markdown
---

# Hello World

// example.tsx
import React from 'react'
// import attributes
import ReactComponent, { attributes } from './vite-plugin-react-markdown-example.md';

function App() {
  return (
    <React.Fragment>
      {attributes.title} {/* attributes.name的值是vite-plugin-react-markdown */}
      <ReactComponent />
    </React.Fragment  >
  );
}

export default App;

Process all markdown files with one component

When I want to add attributes.title to all components , you need to set up wrapperComponentPath

add vite.config Configuration

Markdown({
  wrapperComponent: { Counter: "src/component/Counter/Counter.tsx" },
  wrapperComponentPath: "src/component/Page",
});

// src/component/Page
import type { ReactNode } from "react";
import React from "react";

interface Props {
  attributes: Record<string, any>;
  children: ReactNode;
}
// props will contain attributes
function Page(props: Props) {
  const { children, attributes } = props;
  return (
    <React.Fragment>
      <h1>{attributes.name}</h1>
      {children}
    </React.Fragment>
  );
}
export default Page;

Options

For details, you can check tsdoc.

markdownItOptions

vite-plugin-react-markdown uses markdown-it under the hood, see markdown-it's docs for more details

markdownItSetup

Pass a function that will receive an instance of 'markdown-it', where you can add a plugin.

markdownItUses

add markdown-it plugin

wrapperClasses

default : vite-plugin-react-markdown

By default, you will use a div to wrap the markdown content, where you can set this div to get className.

wrapperComponentPath

You can also use a component to wrap the markdown content. Please enter the component path relative to the root directory.

Configure this property, wrapperClasses will expire. You can set className yourself in the component.

wrapperComponentName

default : ViteReactMarkdown

If you configure wrapperComponentPath, you can customize the name of component loading.

📖TypeScript Shim

declare module "*.md" {
  import React from "react";
  const ReactComponent: React.VFC;
  export default ReactComponent;
  export const attributes = Record<string, any>;
}

// configured wrapperComponentPath, you will use it.
interface WrapperComponentProps {
  attributes: Record<string, any>;
  importComponentName: string[];
}

🌸 Thanks

The project is inspired by vite-plugin-vue-markdown

Some of the code is implemented from vite-plugin-markdown

🐼 Author

geekris1