vite-plugin-react-markdown

vite-plugin-react-markdown

🚀 Features

• 将Markdown转化为React Component
• 再Markdown中使用React Component

🔧 Usage

安装

pnpm add vite-plugin-react-markdown -D 

添加 vite.config

import react from '@vitejs/plugin-react'
import Markdown from 'vite-plugin-react-markdown'

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

导入markdown作为作为React Component使用

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

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

export default App;

在Markdown内使用React Component

<Counter/>

同时需要添加options的配置

import react from '@vitejs/plugin-react'
import Markdown from 'vite-plugin-react-markdown'

export default {
  plugins: [
    Markdown(
    {
      // key 要跟组件名称一致 
      // value 组件所在的路径，相对于根目录
      "Counter":'./src/component/Counter'
    }
    ),
    react({
      include: [/\.tsx$/, /\.md$/], // <-- 添加.md
    })
  ],
}

attributes

---
name: vite-plugin-react-markdown
---

# Hello World

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

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

export default App;

Options

markdownItOptions

vite-plugin-react-markdown 使用 markdown-it,你可在这使用markdown-it的配置

具体可参考markdown-it中文文档

markdownItSetup

传递一个函数，它将收到markdown-it的实例，你可以在这添加插件

markdownItUses

添加markdown-it的插件

wrapperClasses

默认值: vite-plugin-react-markdown

默认会使用一个div将markdown内容包裹，你可在这设置这个div得className

wrapperComponentPath

你也可以使用一个组件来包裹markdown内容，请输入相对于根目录的组件路径

配置这个属性，wrapperClasses将失效，你可自己给组件内自己设置className

wrapperComponentName

默认值: ViteReactMarkdown

如果你配置了wrapperComponentPath，你可以自定义组件加载的名称

📖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

项目灵感来自于 vite-plugin-vue-markdown

部分代码的实现来自 vite-plugin-markdown

🐼 Author

geekris1