KaTeX expressions with escapes and braces throw errors

Subject of the issue

I’m trying to setup a Next.js site with mdx and these remark plugins:

• remark-math@1.0.5
• @kwangkim/remark-jsx-katex@1.11.4 (I couldn’t find the module’s source on GitHub, but you can view it on this RunKit)

And this file under pages/:

This is some extra text that gets rendered correctly if I remove the KaTeX block below:

$$
23_{10} = 2^4+2^2+2^1+2^0 = \underbrace{10111_2}_{\mathrm{binary\ representation}}
$$

I assume the escapes inside braces ({}) are confusing MDX and it’s trying to parse them as a expression, which causes the following error:

(gist error)

As you can see, it’s complaining about a “bad character escape sequence”. One way to fix this would be to ignore all the braces and escapes {}\ inside $ (inlineMath) or $$ (math) blocks.

Your environment

• Windows 10 Pro 1803
• @zeit/next-mdx: 1.2.0
  • @mdx-js/mdx: 0.15.7
• next: 7.0.2-canary.49

Steps to reproduce

Create new Next.js project with the following next.config.js file:

const remarkMath = require('remark-math');
const katex = require('@kwangkim/remark-jsx-katex');

module.exports = require('@zeit/next-mdx')({
  options: {
    mdPlugins: [remarkMath, katex],
  },
  pageExtensions: ['js', 'mdx']
});

Now, create pages/foo.mdx:

This is some extra text that gets rendered correctly if I remove the KaTeX block below:

$$
23_{10} = 2^4+2^2+2^1+2^0 = \underbrace{10111_2}_{\mathrm{binary\ representation}}
$$

Now, run next and load localhost:3000/foo in your browser.

Expected behaviour

The KaTeX escapes should be ignored even if they are inside braces ({}).

Actual behaviour

The KaTeX escapes and generally, all the content inside braces doesn’t get ignored, causing compiling and React rendering issues.

[ChristopherBiscardi]

The escapes get removed by KaTeX when rendering

I believe this is true for any backslashed content in an MDX file (especially ones that are escape-code related cause trouble). It’s also the way I got https://github.com/mdx-js/mdx/pull/366#issuecomment-449937820 working. Wonder if something like this rehype plugin should be included by default?

[ChristopherBiscardi]

We ran into this in gatsby-mdx too (actually we sort of run into things like this a lot because of the way the gatsby plugins function). I added some replacement code in a babel plugin that we use to post-process MDX content after remark and hast plugins have run but before we ship the JSX.

if (
  path.node.openingElement.name.name ===
  "annotation" /* && if gatsby-remark-katex is enabled */
) {
  const genCode = path.node.children.map(ast => generate.default(ast).code);
  path.node.children = [
    t.jSXText(
      genCode
        .join("")
        .replace("{", "{")
        .replace("}", "}")
    )
  ];
}

As you can see, it’s complaining about a “bad character escape sequence”. One way to fix this would be to ignore all the braces and escapes {}\ inside $ (inlineMath) or $$ (math) blocks.

There’s a similar “javascript string escaping”-related issue in https://github.com/mdx-js/mdx/pull/366. so I wonder if we should keep adding to the list of “non-escaped sections” (code blocks, $ or $$ sequences, etc) or somehow default to “html style” interpretation for special chars like {, \u, etc and force \{ or something for bracket literals to get passed through into the final jsx? dunno, haven’t had a moment to think through the ramifications here all the way.