Как экранировать текст в компоненте JSX в Gatsby MDX

Question

Я пытаюсь поместить код (для отображения, а не выполнения) внутри элемента управления JSX Tab в файле MDX. Вот фрагмент файла MDX:

      ## Here's some code in a tab control

<Tabs>
  <Tab title="JavaScript">
    const elements = [
      ...document.querySelectorAll('a.header-link-icon.before'),
    ].map(el => ({
      top: el.getBoundingClientRect().top,
      href: el.href,
    })).sort((el1, el2) => el1.top - el2.top);
  </Tab>
</Tabs>

Но gatsby-plugin-mdx выдает синтаксические ошибки:

      "gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

SyntaxError: unknown: Unexpected token, expected "}" (19:11)
    17 |         ...document.querySelectorAll('a.header-link-icon.before'),
    18 |       ].map(el => ({
  > 19 |         top: el.getBoundingClientRect().top,
       |            ^
    20 |         href: el.href,
    21 |       })).sort((el1, el2) => el1.top - el2.top);
    22 |     </SyntaxHighligher>C:/git_i18n/ayx-l10n-site/src/content/web_standards.mdx: unknown: Unexpected token,   expected "}" (19:11)
    17 |         ...document.querySelectorAll('a.header-link-icon.before'),
    18 |       ].map(el => ({
  > 19 |         top: el.getBoundingClientRect().top,
       |            ^
    20 |         href: el.href,
    21 |       })).sort((el1, el2) => el1.top - el2.top);
    22 |     </SyntaxHighligher>

Как мне избежать кода, чтобы gatsby-plugin-mdx не пытался разобрать его как MDX? Я пробовал заключить его в тройные обратные кавычки, но, похоже, это не работает внутри такого JSX-компонента. Я все еще получаю ту же ошибку.