From 183674cfe8eabe7b60d212314c53cab11e1c2acc Mon Sep 17 00:00:00 2001 From: yuta-ike <38308823+yuta-ike@users.noreply.github.com> Date: Thu, 3 Feb 2022 00:10:39 +0900 Subject: [PATCH 1/2] Update MDX document --- docs/advanced-features/using-mdx.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md index 00f6df03a290a..4c3569f77afcc 100644 --- a/docs/advanced-features/using-mdx.md +++ b/docs/advanced-features/using-mdx.md @@ -46,6 +46,8 @@ The following steps outline how to setup `@next/mdx` in your Next.js project: options: { remarkPlugins: [], rehypePlugins: [], + // If you use `MDXProvider`, comment in the following line. + // providerImportSource: "@mdx-js/react", }, }) module.exports = withMDX({ @@ -153,7 +155,7 @@ 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. +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`. ```jsx // pages/index.js From 17d629b7dcfb82bbcbd9f086c58cffef190c5cef Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 2 Feb 2022 09:21:41 -0600 Subject: [PATCH 2/2] Update docs/advanced-features/using-mdx.md --- docs/advanced-features/using-mdx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md index 4c3569f77afcc..f8e932266e8f8 100644 --- a/docs/advanced-features/using-mdx.md +++ b/docs/advanced-features/using-mdx.md @@ -46,7 +46,7 @@ The following steps outline how to setup `@next/mdx` in your Next.js project: options: { remarkPlugins: [], rehypePlugins: [], - // If you use `MDXProvider`, comment in the following line. + // If you use `MDXProvider`, uncomment the following line. // providerImportSource: "@mdx-js/react", }, })