MDXProvider not using code component for inline code

[jeffwillette]

Describe the bug

MDXProvider used the provided component for block level code (triple backticked) but not for inline code (single backticked)

To Reproduce A link to your gatsby-mdx minimal repro and Steps to reproduce the behavior:

1. use the kitchen sink example
2. use components for MDXProvider

export default class RootWrapper extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <MDXProvider
        components={{
          h1: ({ children, ...props }) => (
            <h1 {...props}>Provided: {children}</h1>
          ),
          pre: props => {
            console.log("pre");
            return <span style={{ backgroundColor: "green" }} {...props} />;
          },
          code: props => {
            console.log("code");
            return <span style={{ backgroundColor: "blue" }} {...props} />;
          },
          wrapper: "section"
        }}
      >
        {children}
      </MDXProvider>
    );
  }
}

3. make one of the mdx pages have a single backticked code and triple backticked code.
4. See that only triple backticked code uses a component and single backticked code uses a regular <code> tag

Expected behavior

I wold expect single backticked code to use a component as well

Screenshots

[johno]

In order to differentiate between the code inside pre tags and inline code there's a special inlineCode node type which you'll need to use here.

Ref: https://mdxjs.com/getting-started#table-of-components

[johno]

🤦‍♂️ It's labeled wrong in the official docs. Fixing now.