From 5402f0992053a76a7b6666c8713f287fcdaf1aef Mon Sep 17 00:00:00 2001 From: David Burrows Date: Mon, 14 Feb 2022 22:27:36 +0000 Subject: [PATCH] Update MDX Custom Elements setup (#34175) The current documentation for MDX Custom Element setup was not clear, ended up on https://github.com/vercel/next.js/issues/30812 before I had this configured correctly, have tried to make the config steps more explicit. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` --- docs/advanced-features/using-mdx.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md index f8e932266e8f8..bdfb3b3e8f3d0 100644 --- a/docs/advanced-features/using-mdx.md +++ b/docs/advanced-features/using-mdx.md @@ -155,7 +155,22 @@ The above generates the following `HTML`: ``` -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 @@ -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)