https://github.com/mintlify/mdx
Mintlify markdown parser
https://github.com/mintlify/mdx
mdx next
Last synced: 4 months ago
JSON representation
Mintlify markdown parser
- Host: GitHub
- URL: https://github.com/mintlify/mdx
- Owner: mintlify
- Created: 2024-01-09T07:48:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-22T21:33:47.000Z (about 1 year ago)
- Last Synced: 2024-12-09T01:36:26.684Z (about 1 year ago)
- Topics: mdx, next
- Language: TypeScript
- Homepage:
- Size: 304 KB
- Stars: 108
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Mint
Open source docs builder that's beautiful, fast, and easy to work with.
 [](https://twitter.com/intent/tweet?url=&text=Check%20out%20%40mintlify)
# Mintlify's markdown parser
**@mintlify/mdx** is a thin layer on top of [next-mdx-remote-client](https://github.com/ipikuka/next-mdx-remote-client) that provides a better developer experience for Next.js users by adding support for syntax highlighting.
## Installation
```bash
# using npm
npm i @mintlify/mdx
# using yarn
yarn add @mintlify/mdx
# using pnpm
pnpm add @mintlify/mdx
```
## Examples
### Next.js pages router
[You can check the example app here](https://github.com/mintlify/mdx/tree/main/examples/pages-router).
1. Call the `serialize` function inside `getStaticProps` and return the `mdxSource` object.
```tsx
export const getStaticProps = (async () => {
const mdxSource = await serialize({
source: '## Markdown H2',
});
if ('error' in mdxSource) {
// handle error case
}
return { props: { mdxSource } };
}) satisfies GetStaticProps<{
mdxSource: SerializeSuccess;
}>;
```
2. Pass the `mdxSource` object as props inside the `MDXComponent`.
```tsx
export default function Page({ mdxSource }: InferGetStaticPropsType) {
return ;
}
```
### Next.js app router
[You can check the example app here](https://github.com/mintlify/mdx/tree/main/examples/app-router).
1. Use the `MDXRemote` component directly inside your async React Server Component.
```tsx
import { MDXRemote } from '@mintlify/mdx';
export default async function Home() {
const source: `---
title: Title
---
## Markdown H2
`;
return (
);
}
```
## APIs
Similar to [next-mdx-remote-client](https://github.com/ipikuka/next-mdx-remote-client), this package exports the following APIs:
- `serialize` - a function that compiles MDX source to SerializeResult.
- `MDXClient` - a component that renders SerializeSuccess on the client.
- `MDXRemote` - a component that both serializes and renders the source - should be used inside async React Server Component.
### serialize
```tsx
import { serialize } from '@mintlify/mdx';
const mdxSource = await serialize({
source: '## Markdown H2',
mdxOptions: {
remarkPlugins: [
// Remark plugins
],
rehypePlugins: [
// Rehype plugins
],
},
});
```
### MDXClient
```tsx
'use client';
import { MDXClient } from '@mintlify/mdx';
;
```
### MDXRemote
```tsx
import { MDXRemote } from '@mintlify/mdx';
;
```