使 PrismJS 语法高亮在 Aurelia 中工作

Question

我正在尝试在我的 Aurelia 应用程序（基于打字稿）中添加 PrismJS 作为语法高升，我已经完成了一半，如下所示

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

我收到了这个错误

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

什么是让它发挥作用的正确方法？

Answer 1

我会发布我的评论作为答案，只是为了让问题结束。

您应该使用 import Prism from 'prismjs'; 而不是 import "prismjs"; 和 let Prism;