Mdx: Backslash sometimes inserted when using $ in text

[lourd]

I noticed that on some parts of my portfolio site (made with gatsby and gatsby-mdx), there are extra backslashes being inserted in some places where dollar signs are used. For example:

• Go to https://descioli.design/grove and Find for \$ — there are 6 occurrences on the page. There are 12 usages of $, though — not every $ is preceded by a backslash.
• The MDX source for that page is here. Note: no backslashes.
• The rendering of the page is here. Pretty standard AFAIK.

It only started happening when I switched from Remark to MDX. I didn't notice it when I did the initial switch.

Environment

• macOS and ubuntu, latest version
• @mdx-js/[email protected], [email protected]
• [email protected], [email protected]

Steps to reproduce

Clone my portfolio repo, https://github.com/lourd/descioli-design, and run it. No additional configuration needed.

Expected behaviour

No extra backslashes.

Actual behaviour

Extra backslashes

[lourd]

This ended up being due to prettier. I'd set it up to run on pre-commit and missed the fact that it was also formatting .mdx files 🤦‍♂ Sorry to waste your time.

[johno]

I'm going to reopen since MDX output is in fact different than remark's. It's a bug in the template literal escaping that we'll need to address.

[lourd]

Just to be clear, it was Prettier that did the extra escape, not Remark. I
switched to MDX and accidentally had Prettier format my .mdx file in the
same commit, and incorrectly attributed the inserted backslash to the
Remark-MDX switch.

On Fri, Jun 21, 2019, 9:54 AM John Otander [e-mail] wrote:

Reopened #606 https://github.com/mdx-js/mdx/issues/606.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/mdx-js/mdx/issues/606?email_source=notifications&email_token=AAPLJZBANLAMLUDBNNWOUM3P3TMRJA5CNFSM4HY33TUKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSDORAVY#event-2430406743,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAPLJZDEEMAYFCVHGWOWQXDP3TMRJANCNFSM4HY33TUA
.

[millette]

Should mdx handle $ and remove the \ when output, since $ must be escaped due to math support - see https://github.com/prettier/prettier/issues/6213.

[johno]

Yeah, ultimately we should detect the presence of \$ and not escape it twice.

In the ideal world Prettier wouldn't add the $ escaping when there isn't inline math being used (or it at least wasn't the default), but it seems like we've reached the point where we need to solve it on our end.

[millette]

I even tried something like cost: 5{"$"} but that was output litteraly.

[adamwathan]

Sorry to comment on a closed issue but I'm still seeing MDX render \$ in the HTML if the dollar sign is escaped in the MDX. It's a Next.js project, and here are my dependencies:

{
  "name": "tailwind-jobs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.6.1",
    "@next/mdx": "^9.4.0",
    "@tailwindcss/ui": "^0.3.0",
    "autoprefixer": "^9.7.6",
    "next": "9.4.0",
    "postcss-nesting": "^7.0.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "tailwindcss": "^1.4.6"
  }
}

Is there a dependency I need to explicitly add that I'm missing, to make sure I'm actually grabbing a recent enough version to get this fix?

[flikteoh]

Hey @johno

Is this still being worked on?

Still having the \$ issue with Gatsby + MDX

[NathanHealea]

@flikteoh and @johno,

I'am also seeing the same issue \$10 when using Gatsby + MDX.

[emanuelturis]

Putting the text inside a p tag has prevented Prettier from adding a the \ before the $ when formatting.

<p>
  The price is $30/month.
</p>

[samajammin]

Hey @lourd - I'm having the same issue (pre-commit hook w/ Prettier). How did you prevent Prettier from doing this?

Thanks in advance!