From 0ec57da3a9037ab0478d48105b651a78f3287ee7 Mon Sep 17 00:00:00 2001
From: Andrew Hollenbach <hollenbach.andrew@gmail.com>
Date: Fri, 25 Feb 2022 10:41:05 -0800
Subject: [PATCH] Update inlineCode reference (#34817)

Howdy!

MDX no longer has an `inlineCode` component in their MDXProvider ([source](https://mdxjs.com/table-of-components/)). They've migrated to a `pre` component for blocks of code and a `code` component for inline code snippets, so I've updated the example to reflect this.

I validated this locally with these example components:

```jsx
const Code = (props) => (
  <code>
    {props.children}
  </code>
);

const Pre = (props) => (
  <pre>
    {props.children}
  </pre>
);

const components = {
  pre: Pre,
  code: Code,
  ...
};
```

Applied to a test `mdx` file:

```md
This is an `inline` example.

~~~
<p>Test code</p>
~~~
```

Which generates the following html:

```html
<p>This is an <code>inline</code> example.</p>
<pre>
  <code>&lt;p&gt;Test code&lt;/p&gt;</code>
</pre>
```

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 docs/advanced-features/using-mdx.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md
index 8087473ca22d..6ed9b3f5756f 100644
--- a/docs/advanced-features/using-mdx.md
+++ b/docs/advanced-features/using-mdx.md
@@ -178,7 +178,7 @@ Then setup the provider in your page
 
 import { MDXProvider } from '@mdx-js/react'
 import Image from 'next/image'
-import { Heading, Text, Pre, Code, Table } from 'my-components'
+import { Heading, InlineCode, Pre, Table, Text } from 'my-components'
 
 const ResponsiveImage = (props) => (
   <Image alt={props.alt} layout="responsive" {...props} />
@@ -189,8 +189,8 @@ const components = {
   h1: Heading.H1,
   h2: Heading.H2,
   p: Text,
-  code: Pre,
-  inlineCode: Code,
+  pre: Pre,
+  code: InlineCode,
 }
 
 export default function Post(props) {