Заставить PrismJS подсветку синтаксиса работать в Аурелии

Question

Я пытаюсь добавить PrismJS в качестве подсветки синтаксиса в моем приложении Aurelia (на основе машинописи), и я на полпути, как показано ниже

1- Установите prismjs

yarn add prismjs

2- добавить часть CSS и код

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

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

3- импортировать prismjs в компонент и вызвать подсветку.

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');
}
}

и я получаю эту ошибку

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

Что может быть правильным способом заставить это работать?

Answer 1

Я оставлю свой комментарий как ответ, просто чтобы закрыть вопрос.

вместо import "prismjs"; а также let Prism; у тебя должно быть import Prism from 'prismjs';