Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mintlify/mdx
Mintlify markdown parser
https://github.com/mintlify/mdx
mdx next
Last synced: 2 months ago
JSON representation
Mintlify markdown parser
- Host: GitHub
- URL: https://github.com/mintlify/mdx
- Owner: mintlify
- Created: 2024-01-09T07:48:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T21:33:47.000Z (4 months ago)
- Last Synced: 2024-12-09T01:36:26.684Z (2 months 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](https://github.com/hashicorp/next-mdx-remote) 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 `getCompiledMdx` function inside `getStaticProps` and return the `mdxSource` object.
```tsx
export const getStaticProps = (async () => {
const mdxSource = await getCompiledMdx({
source: '## Markdown H2',
});
return {
props: {
mdxSource,
},
};
}) satisfies GetStaticProps<{
mdxSource: MDXCompiledResult;
}>;
```
2. Pass the `mdxSource` object as props inside the `MDXComponent`.
```tsx
export default function Page({ mdxSource }: InferGetStaticPropsType) {
return ;
}
```
3. Import `@mintlify/mdx/dist/styles.css` inside your `_app.tsx` file. This file contains the styles for the code syntax highlighting.
```tsx
import '@mintlify/mdx/dist/styles.css';
import { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return ;
}
```
### Next.js app router
[You can check the example app here](https://github.com/mintlify/mdx/tree/main/examples/app-router).
1. Call the `getCompiledServerMdx` function inside your async React Server Component which will give you the `frontmatter` and `content`.
```tsx
import { getCompiledServerMdx } from '@mintlify/mdx';
export default async function Home() {
const { content, frontmatter } = await getCompiledServerMdx({
source: `---
title: Title
---
## Markdown H2
`,
});
return (
{String(frontmatter.title)}
{content}
);
}
```
2. Import `@mintlify/mdx/dist/styles.css` inside your `layout.tsx` file. This file contains the styles for the code syntax highlighting.
```tsx
import '@mintlify/mdx/dist/styles.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## APIs
Similar to [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote), this package exports the following APIs:
- `getCompiledMdx` - a function that compiles MDX source to MDXCompiledResult.
- `MDXComponent` - a component that renders MDXCompiledResult.
- `getCompiledServerMdx` - a function that compiles MDX source to return `content` and `frontmatter ` and should be used inside async React Server Component.
- `MDXServerComponent` - a component that renders `content` and `frontmatter ` and should be used inside async React Server Component.
### getCompiledMdx
```tsx
import { getCompiledMdx } from '@mintlify/mdx';
const mdxSource = await getCompiledMdx({
source: '## Markdown H2',
mdxOptions: {
remarkPlugins: [
// Remark plugins
],
rehypePlugins: [
// Rehype plugins
],
},
});
```
### MDXComponent
```tsx
import { MDXComponent } from '@mintlify/mdx';
;
```
### getCompiledServerMdx
```tsx
import { getCompiledServerMdx } from '@mintlify/mdx';
const { content, frontmatter } = await getCompiledServerMdx({
source: `---
title: Title
---
## Markdown H2
`,
mdxOptions: {
remarkPlugins: [
// Remark plugins
],
rehypePlugins: [
// Rehype plugins
],
},
components: {
// Your custom components
},
});
```
### MDXServerComponent
```tsx
import { MDXServerComponent } from '@mintlify/mdx';
;
```