使PrismJS语法高级别在Aurelia中工作

Question

我正试图在我的Aurelia应用程序(基于类型记录的)中添加PrismJS作为语法高级程序，我在那里的一半路程如下所示

1-安装棱镜

yarn add prismjs

2-添加css和代码部分

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

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

3-在组件中导入棱镜并调用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';