在Aurelia中使PrismJS语法高亮工作

Question

我正在尝试在我的Aurelia应用程序（基于打字稿）中将PrismJS作为语法高标准添加，并且如下所示

1-安装pyramidjs

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 "prismjs";

，而不是let Prism;和import Prism from 'prismjs';