Error when copying text which contains backticks.

[oct4vian]

I have this code snippet which I want to copy:

import styles from './Header.module.scss';
import logo from '../images/logo.svg';

const Header = () => {
  return (
    <header className={`${styles.header} color-white px-24px flex`}>
      <div className={styles.logo}>
        <img src={logo} alt="WFinance" />
        <span className="ml-8px pt-8px">Developer Portal</span>
      </div>

      <TopNav />

      <SearchBox />
    </header>
  );
};

When I try to use the copy button, I get the error Uncaught ReferenceError: styles is not defined at HTMLDivElement.onclick ((index):6)

The problem is that chrome sees the styles as a variable and thinks that it is undefined. Here is a picture of what displays if I click to see the code.

The styles.code should be orange colored (string), but it is seen as a variable.

The fix should be escaping the dollar sign and the curly braces. I could open a Pull Request and fix it.

Thank you.

[iamskok]

@oct4vian I’m very sorry for getting back to you so late. You are more than welcome to submit a PR! Feel free to reopen this issue once you are ready.

_{Sent with GitHawk}