24
24
![ contributions welcome] ( https://img.shields.io/badge/contributions-welcome-brightgreen?logo=github ) [ ![ Tweet] ( https://img.shields.io/twitter/url?url=https%3A%2F%2Fmintlify.com%2F )] ( https://twitter.com/intent/tweet?url=&text=Check%20out%20%40mintlify )
25
25
26
26
</p >
27
-
28
- <p >
29
- <a href="https://mintlify.com" target="_blank">
30
- <img
31
- src="https://mintlify.com/assets/og.png"
32
- alt="Mintlify"
33
- width="100%"
34
- />
35
- </a>
36
- </p >
37
27
</div >
38
28
39
29
# Mintlify's markdown parser
@@ -64,7 +54,7 @@ pnpm add @mintlify/mdx
64
54
``` tsx
65
55
export const getStaticProps = (async () => {
66
56
const mdxSource = await getCompiledMdx ({
67
- source: " ## Markdown H2" ,
57
+ source: ' ## Markdown H2' ,
68
58
});
69
59
70
60
return {
@@ -80,19 +70,16 @@ pnpm add @mintlify/mdx
80
70
2 . Pass the ` mdxSource ` object as props inside the ` MDXComponent ` .
81
71
82
72
``` tsx
83
- export default function Page({
84
- mdxSource ,
85
- }: InferGetStaticPropsType <typeof getStaticProps >) {
73
+ export default function Page({ mdxSource }: InferGetStaticPropsType <typeof getStaticProps >) {
86
74
return <MDXComponent { ... mdxSource } />;
87
75
}
88
76
```
89
77
90
78
3 . Import ` @mintlify/mdx/dist/styles.css ` inside your ` _app.tsx ` file. This file contains the styles for the code syntax highlighting.
91
79
92
80
``` tsx
93
- import " @mintlify/mdx/dist/styles.css" ;
94
-
95
- import { AppProps } from " next/app" ;
81
+ import ' @mintlify/mdx/dist/styles.css' ;
82
+ import { AppProps } from ' next/app' ;
96
83
97
84
export default function App({ Component , pageProps }: AppProps ) {
98
85
return <Component { ... pageProps } />;
@@ -106,7 +93,7 @@ pnpm add @mintlify/mdx
106
93
1 . Call the ` getCompiledServerMdx ` function inside your async React Server Component which will give you the ` frontmatter ` and ` content ` .
107
94
108
95
``` tsx
109
- import { getCompiledServerMdx } from " @mintlify/mdx" ;
96
+ import { getCompiledServerMdx } from ' @mintlify/mdx' ;
110
97
111
98
export default async function Home() {
112
99
const { content, frontmatter } = await getCompiledServerMdx ({
@@ -131,19 +118,15 @@ pnpm add @mintlify/mdx
131
118
2 . Import ` @mintlify/mdx/dist/styles.css ` inside your ` layout.tsx ` file. This file contains the styles for the code syntax highlighting.
132
119
133
120
``` tsx
134
- import type { Metadata } from " next " ;
135
- import " @mintlify/mdx/dist/styles.css " ;
121
+ import ' @mintlify/mdx/dist/styles.css ' ;
122
+ import type { Metadata } from ' next ' ;
136
123
137
124
export const metadata: Metadata = {
138
- title: " Create Next App" ,
139
- description: " Generated by create next app" ,
125
+ title: ' Create Next App' ,
126
+ description: ' Generated by create next app' ,
140
127
};
141
128
142
- export default function RootLayout({
143
- children ,
144
- }: {
145
- children: React .ReactNode ;
146
- }) {
129
+ export default function RootLayout({ children }: { children: React .ReactNode }) {
147
130
return (
148
131
<html lang = " en" >
149
132
<body >{ children } </body >
@@ -164,10 +147,10 @@ Similar to [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote), this
164
147
### getCompiledMdx
165
148
166
149
``` tsx
167
- import { getCompiledMdx } from " @mintlify/mdx" ;
150
+ import { getCompiledMdx } from ' @mintlify/mdx' ;
168
151
169
152
const mdxSource = await getCompiledMdx ({
170
- source: " ## Markdown H2" ,
153
+ source: ' ## Markdown H2' ,
171
154
mdxOptions: {
172
155
remarkPlugins: [
173
156
// Remark plugins
@@ -182,7 +165,7 @@ const mdxSource = await getCompiledMdx({
182
165
### MDXComponent
183
166
184
167
``` tsx
185
- import { MDXComponent } from " @mintlify/mdx" ;
168
+ import { MDXComponent } from ' @mintlify/mdx' ;
186
169
187
170
<MDXComponent
188
171
components = {
@@ -197,7 +180,7 @@ import { MDXComponent } from "@mintlify/mdx";
197
180
### getCompiledServerMdx
198
181
199
182
``` tsx
200
- import { getCompiledServerMdx } from " @mintlify/mdx" ;
183
+ import { getCompiledServerMdx } from ' @mintlify/mdx' ;
201
184
202
185
const { content, frontmatter } = await getCompiledServerMdx ({
203
186
source: ` ---
@@ -223,7 +206,7 @@ const { content, frontmatter } = await getCompiledServerMdx({
223
206
### MDXServerComponent
224
207
225
208
``` tsx
226
- import { MDXServerComponent } from " @mintlify/mdx" ;
209
+ import { MDXServerComponent } from ' @mintlify/mdx' ;
227
210
228
211
<MDXServerComponent
229
212
source = " ## Markdown H2"
0 commit comments