title: Making PrismJS syntax highliting work in Aurelia
body: <p>I am trying to add PrismJS as syntax highliter in my Aurelia app (typescript based) and I am half way there as below</p>
  
  <p>1- Install prismjs</p>
  
  <pre><code>yarn add prismjs
  </code></pre>
  
  <p>2- add css &amp; code part</p>
  
  <pre><code>&lt;template&gt;
    &lt;require from="prismjs/themes/prism.css"&gt;&lt;/require&gt;
  
    &lt;pre&gt;&lt;code class="language-sql"&gt;${highlightedSQL}&lt;/code&gt;&lt;/pre&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>3- import the prismjs in the component and call highlite.</p>
  
  <pre><code>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');
  }
  }
  </code></pre>
  
  <p>and I am getting this error</p>
  
  <pre><code>Unhandled rejection TypeError: Cannot read property 'highlight' of undefined
  </code></pre>
  
  <p>what could be the right way to make it work?</p>