Блоки кода в mdx выдают ошибки из-за синтаксического анализа кода

Question

Недавно я преобразовал свои сообщения gatsby для использования gatsby-plugin-mdx и по большей части переход был плавным, однако в некоторых моих сообщениях я столкнулся с проблемой, а именно с тем, что код в блоках кода анализируется, и не удается создать эти сообщения.

Это происходит в посте, в котором я пишу о классах и компонентах функционального реагирования, и в одном из моих примеров я намеренно создал некоторую неправильную разметку, чтобы проиллюстрировать точку. `gatsby-plugin-mdx` * кажется * анализирует это, а затем терпит неудачу, потому что это неправильно...

Как я могу это обойти? Есть ли способ избежать этих блоков или мне нужно использовать другой плагин?

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 с преднамеренной ошибкой (он заключен в обратные кавычки, но не уверен, как я могу избежать их в Markdown!):

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

Answer 1

Оказывается, проблема не в блоке кода. Это был обычный параграф после этого блока, который содержал текст, содержащий. Обтекание его задними галочками устраняет проблему <div>