https://github.com/3lang3/vite-plugin-react-mdoc
import markdown files in vite and get code block.
https://github.com/3lang3/vite-plugin-react-mdoc
Last synced: over 1 year ago
JSON representation
import markdown files in vite and get code block.
- Host: GitHub
- URL: https://github.com/3lang3/vite-plugin-react-mdoc
- Owner: 3lang3
- Created: 2021-12-29T02:09:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T13:21:38.000Z (over 4 years ago)
- Last Synced: 2025-02-01T02:41:24.116Z (over 1 year ago)
- Language: TypeScript
- Size: 698 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-mdoc
A plugin enables you to import a Markdown file as various formats on your [vite](https://github.com/vitejs/vite) project inspirt by [dumi](https://github.com/umijs/dumi).
## Setup
```
npm i -D vite-plugin-react-mdoc
```
### Config
```js
const mdoc = require('vite-plugin-react-mdoc');
module.exports = {
plugins: [mdoc(options)],
};
```
Then you can import front matter attributes from `.md` file as default.
````md
# Hello world
```tsx
import React from 'react';
export default () => {
const [count, setCount] = React.useState(0);
return setCount(v => v + 1)}>count: {count};
};
```
````
```tsx
import { MdContent, MdDemos } from './doc.md';
````
### Type declarations
In TypeScript project, need to declare typedefs for `.md` file as you need.
```ts
declare module '*.md' {
// When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>
import React from 'react';
type MDocPreviewerProps = {
code: string;
lang: string;
key: string;
dependencies: Record<
string,
{
type: string;
value: string;
css: boolean;
}
>;
meta: Record;
children: React.ReactNode;
}
const MdContent: React.VFC<{
previewer?: (props: MDocPreviewerProps) => React.ReactNode;
}>;
const MdDemos: ({ Component: React.VFC; key: string } & Record)[];
const frontmatter: Record;
const slugs: { depth: number; text: string; id: string; }[];
// Modify below per your usage
export { MdContent, MdDemos, frontmatter, slugs };
}
```
Save as `vite.d.ts` for instance.
## License
MIT