Making PrismJS syntax highliting work in Aurelia

Question

I am trying to add PrismJS as syntax highliter in my Aurelia app (typescript based) and I am half way there as below

1- Install prismjs

yarn add prismjs

2- add css & code part

<template>
  <require from="prismjs/themes/prism.css"></require>

  <pre><code class="language-sql">${highlightedSQL}</code></pre>
</template>

3- import the prismjs in the component and call highlite.

import "prismjs";
import prismsql from "prismjs/components/prism-sql";

let Prism; // very weird, I have to declare a global variable, other wise it won't work(typescript error)
@inject(HttpClient)
export class Detail {

highlight() {
    this.highlightedSQL = Prism.highlight(data.sql, Prism.languages.sql, 'sql');
}
}

and I am getting this error

Unhandled rejection TypeError: Cannot read property 'highlight' of undefined

what could be the right way to make it work?

Answer 1

ill post my comment as an answer just to have the question closed.

instead of import "prismjs"; and let Prism; you should have import Prism from 'prismjs';