使 PrismJS 语法突出显示在 Aurelia 中工作
Making PrismJS syntax highliting work in Aurelia
我正在尝试在我的 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
让它发挥作用的正确方法是什么?
生病 post 我的评论作为答案只是为了关闭问题。
而不是 import "prismjs";
和 let Prism;
你应该 import Prism from 'prismjs';
我正在尝试在我的 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
让它发挥作用的正确方法是什么?
生病 post 我的评论作为答案只是为了关闭问题。
而不是 import "prismjs";
和 let Prism;
你应该 import Prism from 'prismjs';