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';;
```