Mdx: Unable to render \${...} in code block

[yangshun]

Subject of the issue

Feel free to close if this is not a bug (or bug of some other library).

I'm trying to render the following

```
python command subdir=\${model.nb_layers}
```

but it crashes because MDX tries to evaluate the contents of the ${...}. I suspect some double escaping occurs and the problem (if indeed a problem) lies in this line. Or it could be a remark issue. Not entirely sure which.

I also posted on Spectrum here because I wasn't sure whether this was a bug.

Your environment

• OS: macOS 10.15.1
• Packages: @mdx-js/[email protected]
• Env: Node 8.16.2, Yarn 1.16.0

Steps to reproduce

Repo here - https://github.com/yangshun/hydra/blame/master/website/docs/configure_hydra/workdir.md#L67-L69

Expected behaviour

Renders fine. It renders ok for GFM.

Actual behaviour

MDX tries to evaluate the contents of the ${...}. I suspect some double escaping occurs.

[ChristianMurphy]

It is escaping

```
python command subdir=\${model.nb_layers}
```

results in

/* @jsx mdx */
const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};
const layoutProps = {

};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <pre><code parentName="pre" {...{}}>{`python command subdir=\\${model.nb_layers}
`}</code></pre>
    </MDXLayout>;
}
;
MDXContent.isMDXComponent = true;

while

```
python command subdir=${model.nb_layers}
```

results in

/* @jsx mdx */
const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};
const layoutProps = {

};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <pre><code parentName="pre" {...{}}>{`python command subdir=\${model.nb_layers}
`}</code></pre>
    </MDXLayout>;
}
;
MDXContent.isMDXComponent = true;

The question is, should it?
From the ongoing discussion at https://github.com/mdx-js/mdx/issues/628, maybe?
Interpolated content can be interleaved in markdown, this is one edge cases that can happen with interleaving.

[yangshun]

@ChristianMurphy to be clear, I want to render the \ also - I also tried \\\${...} but it becomes \\\\${...} and \ escapes the \ in front of the $.

[omry]

@ChristianMurphy, the desired output to show to the user \${model.nb_layers} in a code block.
(Just like GitHub is rendering it now).
The escaping before the $ is a part of the documentation.

[ChristianMurphy]

Thanks for the clarification @yangshun and @omry!
That makes sense, PRs are welcome!

[bravo-kernel]

I placed a $100 bounty for the person whose pull request for fixing this issue gets merged. Add to or claim the bounty here https://www.bountysource.com/issues/86803859-unable-to-render-in-code-block.

[lex111]

I created PR #991 for fix this. Take a look please.

[bravo-kernel]

@lex111 awesome and nice to see that you are going after it. As far as the PR goes I cannot judge it so we/you are at the mercy of the mdx crew. I have subscribed to the PR so I will keep an eye on it 🤞