Backslash sometimes inserted when using $ in text #606

lourd · 2019-06-18T03:07:35Z

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

The text was updated successfully, but these errors were encountered:

lourd · 2019-06-21T03:15:46Z

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 · 2019-06-21T13:54:23Z

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 · 2019-06-24T16:35:47Z

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 ***@***.***> wrote: Reopened #606 <#606>. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#606?email_source=notifications&email_token=AAPLJZBANLAMLUDBNNWOUM3P3TMRJA5CNFSM4HY33TUKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSDORAVY#event-2430406743>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAPLJZDEEMAYFCVHGWOWQXDP3TMRJANCNFSM4HY33TUA> .

millette · 2019-08-19T21:12:12Z

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

johno · 2019-08-19T21:25:13Z

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 · 2019-08-19T22:00:28Z

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

Prettier escapes all "$" characters that aren't used for inline math. This ensures MDX doesn't double escape the "\$", otherwise "\$" ends up rendered in the document. Closes #606

* Don't double escape "$" characters that are alread escaped Prettier escapes all "$" characters that aren't used for inline math. This ensures MDX doesn't double escape the "\$", otherwise "\$" ends up rendered in the document. Closes #606 * Use proper negative lookahead regex * Add more tests around dollar escaping * Make eslint happy

adamwathan · 2020-05-13T02:57:19Z

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 · 2020-07-14T05:19:57Z

Hey @johno

Is this still being worked on?

Still having the \$ issue with Gatsby + MDX

NathanHealea · 2020-08-15T22:53:56Z

@flikteoh and @johno,

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

emanuelturis · 2020-09-26T16:02:38Z

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 · 2020-12-09T13:28:50Z

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

Thanks in advance!

This PR changes the internals of the core `@mdx-js/mdx` package to generate a JavaScript syntax tree instead of a string. This fixes escaping issues such as #1219. It makes `mdx-hast-to-jsx` much more palatable. It also prevents several Babel parses. It paves the way for passing in Babel plugins, which is useful for users, but also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls directly and make MDX’s output directly usable. * `babel-plugin-apply-mdx-type-props`: add `parentType` * `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace * `mdx`: use `hast-util-to-estree` to transform hast to estree * `mdx`: use `estree-to-babel` to transform estree to Babel * `mdx`: generate estree/Babel instead of strings * `mdx`: use `@babel/generator` to serialize Babel AST * `vue`: stop supporting the react transform: (it doesn’t make sense) * `vue`: fix support for props to components Related to GH-741. Related to GH-1152. Closes GH-606. Closes GH-1028. Closes GH-1219.

This PR changes the internals of the core `@mdx-js/mdx` package to generate a JavaScript syntax tree instead of a string. This fixes escaping issues such as #1219. It makes `mdx-hast-to-jsx` much more palatable. It also prevents several Babel parses. It paves the way for passing in Babel plugins, which is useful for users, but also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls directly and make MDX’s output directly usable. * `babel-plugin-apply-mdx-type-props`: add `parentType` * `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace * `mdx`: use `hast-util-to-estree` to transform hast to estree * `mdx`: use `estree-to-babel` to transform estree to Babel * `mdx`: generate estree/Babel instead of strings * `mdx`: use `@babel/generator` to serialize Babel AST * `vue`: stop supporting the react transform: (it doesn’t make sense) * `vue`: fix support for props to components Related to GH-741. Related to GH-1152. Closes GH-606. Closes GH-1028. Closes GH-1219. Closes GH-1382. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>

As prettier has finally been fixed to not re-add it. See: * prettier/prettier#6213 * mdx-js/mdx#606

flores8 · 2021-04-07T17:55:37Z

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.

sebastienbarre · 2022-03-07T19:10:46Z

Is there any plan on fixing this for * as well?

For example, in a MDX file:

MDX also supports JavaScript expressions inside curly braces, i.e.: {Math.PI * 2}

Prettier automatically changes it to:

MDX also supports JavaScript expressions inside curly braces, i.e.: {Math.PI \* 2}

Which breaks MDX parsers -- this is no longer a valid Javascript/JSX expression.

Using Prettier's recommended  won't help because it breaks the MDX parser as well (because of the < used for React/JSX components), and using MDX's recommend {/* this is a comment */} doesn't work because it is not recognized by Prettier since the file is treated as Markdown (as it should), not JSX.

Thanks

ChristianMurphy · 2022-03-07T19:18:16Z

The * escaping is due to prettier currently supporting only MDX 1 rather than MDX 2, meaning it currently doesn't recognize the inline JSX expression and adds an escape.
MDX 2 support in prettier is being discussed at prettier/prettier#12209

wooorm · 2022-03-07T19:38:33Z

To add (or explicitly clarify): The JS in braces are a new MDX 2 thing. So, we just added support for them. Now other tools have to support them too!

lourd mentioned this issue Jun 18, 2019

Extra backslash sometimes inserted when using $ in text ChristopherBiscardi/gatsby-mdx#405

Closed

johno added the 🐛 type/bug This is a problem label Jun 19, 2019

lourd closed this as completed Jun 21, 2019

johno reopened this Jun 21, 2019

gillkyle mentioned this issue Jun 25, 2019

fix(blog): pullquotes and linking updates gatsbyjs/gatsby#15127

Merged

johno mentioned this issue Aug 20, 2019

Don't double escape "$" characters that are already escaped #740

Merged

johno closed this as completed in #740 Sep 4, 2019

johno reopened this May 13, 2020

samajammin mentioned this issue Dec 9, 2020

Prettier pre-commit hook adds backslash before dollar signs in markdown files ethereum/ethereum-org-website#2090

Closed

wooorm mentioned this issue Dec 15, 2020

Refactor to generate JS AST #1382

Merged

wooorm closed this as completed in #1382 Dec 18, 2020

jgosmann added a commit to jgosmann/adventures that referenced this issue Jan 5, 2021

Remove undesired backslash

e8bc43d

As prettier has finally been fixed to not re-add it. See: * prettier/prettier#6213 * mdx-js/mdx#606

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Backslash sometimes inserted when using $ in text #606

Backslash sometimes inserted when using $ in text #606

lourd commented Jun 18, 2019 •

edited

lourd commented Jun 21, 2019

johno commented Jun 21, 2019

lourd commented Jun 24, 2019 via email

millette commented Aug 19, 2019

johno commented Aug 19, 2019

millette commented Aug 19, 2019

adamwathan commented May 13, 2020

flikteoh commented Jul 14, 2020 •

edited

NathanHealea commented Aug 15, 2020 •

edited

emanuelturis commented Sep 26, 2020

samajammin commented Dec 9, 2020

flores8 commented Apr 7, 2021

sebastienbarre commented Mar 7, 2022 •

edited

ChristianMurphy commented Mar 7, 2022

wooorm commented Mar 7, 2022 •

edited

Backslash sometimes inserted when using $ in text #606

Backslash sometimes inserted when using $ in text #606

Comments

lourd commented Jun 18, 2019 • edited

Environment

Steps to reproduce

Expected behaviour

Actual behaviour

lourd commented Jun 21, 2019

johno commented Jun 21, 2019

lourd commented Jun 24, 2019 via email

millette commented Aug 19, 2019

johno commented Aug 19, 2019

millette commented Aug 19, 2019

adamwathan commented May 13, 2020

flikteoh commented Jul 14, 2020 • edited

NathanHealea commented Aug 15, 2020 • edited

emanuelturis commented Sep 26, 2020

samajammin commented Dec 9, 2020

flores8 commented Apr 7, 2021

sebastienbarre commented Mar 7, 2022 • edited

ChristianMurphy commented Mar 7, 2022

wooorm commented Mar 7, 2022 • edited

lourd commented Jun 18, 2019 •

edited

flikteoh commented Jul 14, 2020 •

edited

NathanHealea commented Aug 15, 2020 •

edited

sebastienbarre commented Mar 7, 2022 •

edited

wooorm commented Mar 7, 2022 •

edited