Code blocks in mdx throw errors due to code parsing

Question

I've recently converted my gatsby posts to use gatsby-plugin-mdx 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.

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...

How can I get around this? Is there a way to escape these blocks or do I need to use a different plugin?

config:

...
{
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: [`.md`, `.mdx`],
                defaultLayouts: {
                    adventures: require.resolve("./src/views/Advanced.jsx"),
                    default: require.resolve("./src/views/Advanced.jsx")
                }
            },
            gatsbyRemarkPlugins: [
    {
        resolve: `gatsby-plugin-catch-links`,
        options: {
            excludePattern: /(excluded-link|external)/
        }
    },
    {
        resolve: `gatsby-remark-prismjs`,
        options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: false,
            noInlineHighlight: false,
            prompt: {
                user: "root",
                host: "localhost",
                global: false
            },
            escapeEntities: {}
        }
    },
    {
        resolve: "gatsby-remark-relative-images",
        options: {
            name: "uploads"
        }
    },
    {
        resolve: "gatsby-remark-images",
        options: {
            maxWidth: 2048
        }
    },
    {
        resolve: "gatsby-remark-copy-linked-files",
        options: {
            destinationDir: "static"
        }
    }
]
...
        },

Markdown with deliberate error (it's wrapped in backticks but not sure how I can escape them in markdown!):

class List extends Component {
  render() {
    return (
      <h2>List title</h2>
      <ul>
      
      </ul>
    )
  }
}

Answer 1

Turns out this issue isn't the code block. It was in a normal para after this block that contained the text containing a . Wrapping it in back ticks fixes the issue <div>