How to escape backticks?

[anzuj]

I'm trying to showcase this code via prism:

 code: `this.reasons.push({
        id: i,
       name: `Reason-${i}`
      });`

and in template:
<prism language="js">{{ code}}</prism>

When compiling I get an error:

Failed to compile.
./src/components/Reasons/Reason-8.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Reasons/Reason-8.vue?vue&type=script&lang=js&) 58:14
Module parse failed: Unexpected token (58:14)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
    this.reasons.push({
       id: i,
        name: \`Reason-${i}\`
     });
    }

How can I overcome this problem and use template literals with Prism?

[anzuj]

Anyone perhaps knows how to solve this? Been a while :)

[JMaylor]

You should just be able to escape these with backslash, e.g.

<template>
  <prism language="javascript">{{code}}</prism>
</template>

<script>
  import Prism from "vue-prism-component";
  export default {
    components: { Prism },
    data() {
      return {
        code: `const message = \`Hi, ${name}\`;
                  console.log(message);`,
      };
    },
  };
</script>

Code will render as:

const message = `Hi, ${name}`;
console.log(message);