When I try to add certain snippets of code which work well in regular markdown I get "undefined" errors

The latest is specifically this snippet of code:

secondHand.style.mozTransform = `rotate(${secondsDegrees}deg)`;
secondHand.style.webkitTransform = `rotate(${secondsDegrees}deg)`;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

I am being told in console that secondsDegrees is not defined:

Uncaught ReferenceError: secondsDegrees is not defined

This is supposed to be a snippet of code in markdown, so it should not matter whether or not something has been “defined”. I have been using Chrome, and I also use Atom and eslint. This kind of thing has happened several times already. How can I avoid it? Or can I? Thanks.

[rexxars]

This isn’t a problem with react-markdown, but rather with how your code defines the markdown.

Let’s image you want the following markdown to be rendered:

## Template literals

```js
const color = "blue"
const str = `The car is ${color}`
console.log(str)
```

Variable interpolation is **neat**, right?

If you put this into a Javascript file like this:

const markdown = `
## Template literals

```js
const color = "blue"
const str = `The car is ${color}`
console.log(str)
```

Variable interpolation is **neat**, right?`

It will give an error like the one you are encountering:

ReferenceError: color is not defined

This is because the backticks in this markdown will be interpreted as closing/starting ES6 template literals.

So in order to make this work, you need to escape the backticks by prefixing them with a \ character. Having done that, you will also have to escape variable interpolation in the same way, escaping the $ character. Altogether:

const markdown = `
## Template literals

\`\`\`js
const color = "blue"
const str = \`The car is \${color}\`
console.log(str)
\`\`\`

Variable interpolation is **neat**, right?`

Note that this is only necessary because of the way the markdown is loaded/defined. If you were to define the same markdown with plain old ES5 string semantics, it would work just fine:

const markdown = [
  '## Template literals',
  '',
  '```js',
  'const color = "blue"',
  'const str = `The car is ${color}`',
  'console.log(str)',
  '```',
  '',
  'Variable interpolation is **neat**, right?`',
].join('\n')

console.log(markdown)

Or if you were fetching the markdown from a remote source, it would also just work:

fetch('some-markdown-file.md')
  .then(res => res.text())
  .then(markdown => console.log(ReactDOM.renderToString(<Markdown source={markdown} />)))

The main takeaway from this is that the error you are seeing is a result of the input in and of itself and is not really related to react-markdown. If you take the same code that defines the markdown source and remove any reference to react-markdown, it’ll give you the same error.

Hope this was helpful 😃

[interglobalmedia]

@rexxars I decided it was worth the couple of extra seconds to escape the template literals so I could stay true to the code I used in the project(s). It works very nicely! Thanks so much.