title: Code blocks in mdx throw errors due to code parsing
body: <p>I've recently converted my gatsby posts to use <code>gatsby-plugin-mdx</code> and for the most part, the transition has been seamless, however for a few of my posts I am running into an issue - namely that the code in code blocks is being parsed and the failing to build those posts.</p>
  <p>This happens on a post where I am writing about classes and functional react components and in one of my examples I have deliberately created some wrong markup to illustrate a point. `gatsby-plugin-mdx` *seems* to be parsing this and then failing because it is wrong...</p>
  <p>How can I get around this? Is there a way to escape these blocks or do I need to use a different plugin?</p>
  <p>config:</p>
  <pre><code>...
  {
              resolve: `gatsby-plugin-mdx`,
              options: {
                  extensions: [`.md`, `.mdx`],
                  defaultLayouts: {
                      adventures: require.resolve(&quot;./src/views/Advanced.jsx&quot;),
                      default: require.resolve(&quot;./src/views/Advanced.jsx&quot;)
                  }
              },
              gatsbyRemarkPlugins: [
      {
          resolve: `gatsby-plugin-catch-links`,
          options: {
              excludePattern: /(excluded-link|external)/
          }
      },
      {
          resolve: `gatsby-remark-prismjs`,
          options: {
              classPrefix: &quot;language-&quot;,
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
              noInlineHighlight: false,
              prompt: {
                  user: &quot;root&quot;,
                  host: &quot;localhost&quot;,
                  global: false
              },
              escapeEntities: {}
          }
      },
      {
          resolve: &quot;gatsby-remark-relative-images&quot;,
          options: {
              name: &quot;uploads&quot;
          }
      },
      {
          resolve: &quot;gatsby-remark-images&quot;,
          options: {
              maxWidth: 2048
          }
      },
      {
          resolve: &quot;gatsby-remark-copy-linked-files&quot;,
          options: {
              destinationDir: &quot;static&quot;
          }
      }
  ]
  ...
          },
  </code></pre>
  <p>Markdown with deliberate error (it's wrapped in backticks but not sure how I can escape them in markdown!):</p>
  <pre><code>class List extends Component {
    render() {
      return (
        &lt;h2&gt;List title&lt;/h2&gt;
        &lt;ul&gt;
        
        &lt;/ul&gt;
      )
    }
  }
  </code></pre>