[](https://www.npmjs.com/package/@pity/vite-plugin-react-markdown)
npm install @pity/vite-plugin-react-markdown
Compile Markdown to React component.
- Use Markdown as React components
- Use React components in Markdown
Install
``bash`
ni @pity/vite-plugin-react-markdown -D yarn/npm/pnpm add @pity/vite-plugin-react-markdown -D
Add it to vite.config.js
`jscomponentPath
/* .... /
import Markdown from '@pity/vite-plugin-react-markdown'
export default defineConfig({
plugins: [
react(),
Markdown({
wrapperComponentName: 'ReactMarkdown',
wrapperComponentPath: './src/components/page',
// if you want use components in md file, please add it in this
// [ComponentName]:
// 🐱🚀: the must be CamelCase
importComponentsPath: {
ReactTest: './src/components/pages/mdtest',
},
// markdownItUses: [
// prism,
// ],
}),
],
})
> the default importComponentsPath is ~/src/components/pages/*.tsx if you don't provide importComponentsPath
And import it as a normal React component
`jsx`
import Hello from './README.md'
function App() {
return (
)
}
You can even use React components inside your markdown, for example
`jsx`
Frontmatter will be parsed,
For example:
`md
---
name: My Cool App
---
`
Will be rendered as
`html`Hello World
And you can use frontmatter in other and import it from this markdown file.
`jsx`
import {attributes} from './README.md'
// attributes = {name: 'My Cool App'}
@pity/vite-plugin-react-markdown uses markdown-it under the hood, see markdown-it's docs for more details
`ts
// vite.config.js
import Markdown from '@pity/vite-plugin-react-markdown'
export default {
plugins: [
Markdown({
// default options passed to markdown-it
// see: https://markdown-it.github.io/markdown-it/
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
md.use(require('markdown-it-anchor'))
md.use(require('markdown-it-prism'))
},
// Class names for the wrapper div
wrapperClasses: 'markdown-body'
})
],
}
`
See the tsdoc for more advanced options
See the /example.
`ts``
declare module '*.md' {
import type React from 'react'
const ReactComponent: React.VFC
export default ReactComponent
}
This project is inspired by vite-plugin-vue-markdown
and mosts of code is from geekris1/vite-plugin-react-markdown
MIT License © 2022-PRESENT Priority