Backslash sometimes inserted when using $ in text

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/mdx@1.0.20, gatsby-mdx@0.6.3
• node@10.1.0, yarn@1.13.0

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

[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?

[flores8]

If anyone else runs into this problem like I did today, here’s how I fixed it. I needed prettier to stop adding in the backslash. I first started looking in the prettier settings to see if I could turn off the math portion but that ended up being a dead end. I realized that I needed to tell prettier to simply ignore it.

I first tried to my prettier ignore file: https://media.lauraleeflores.com/llu5D48j that works however it will ignore the page completely and that was not ideal for me.

The solution that worked was to simply ignore a portion of the file. You can learn more about that here: https://prettier.io/docs/en/ignore.html

Mine is an mdx file so this is how I ignored it: https://media.lauraleeflores.com/YEuR1dYj

I hope that helps someone who runs into the same problem.