Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update MDX Custom Elements setup #34175

Merged
merged 3 commits into from Feb 14, 2022
Merged

Update MDX Custom Elements setup #34175

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c89714
Update MDX Custom Elements setup
dburrows Feb 10, 2022
f4ac4b4
lint fix
dburrows Feb 13, 2022
1103ca3
Merge branch 'canary' into patch-2
ijjk Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 18 additions & 1 deletion docs/advanced-features/using-mdx.md
View file
Open in desktop
Expand Up @@ -155,7 +155,22 @@ The above generates the following `HTML`:
</ul>
```

When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name. You also need to specify `providerImportSource: "@mdx-js/react"` in `next.config.js`.
When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name.

To enable you need to specify `providerImportSource: "@mdx-js/react"` in `next.config.js`.

```js
// next.config.js

const withMDX = require('@next/mdx')({
// ...
options: {
providerImportSource: '@mdx-js/react',
},
})
```

Then setup the provider in your page

```jsx
// pages/index.js
Expand Down Expand Up @@ -186,6 +201,8 @@ export default function Post(props) {
}
```

If you use it across the site you may want to add the provider to `_app.js` so all MDX pages pick up the custom element config.

## Helpful Links

- [MDX](https://mdxjs.com)
Expand Down